Кнопка «Назад» не работает с history.pushState, включающей динамически загружаемый iframe - PullRequest
Новая
       51

Кнопка «Назад» не работает с history.pushState, включающей динамически загружаемый iframe

0 голосов
/ 25 апреля 2019

У меня есть страница, где пользователь может нажать кнопку, чтобы загрузить фрейм (который перекрывает страницу).Чтобы это выглядело так, будто я на самом деле беру их на эту страницу, я также вызываю history.pushState () с URL-адресом страницы (предоставленный код сделает это более понятным).Теперь, если я нажимаю кнопку «Назад» в моем браузере, он не запускает событие onpopstate немедленно.Похоже, это происходит только при втором щелчке.

HTML 

<button class="d">Apple</button>
<button class="d">Banana</button>
<button class="d">Orange</button>
<button class="d">Pineapple</button>

<iframe src="" style="position:absolute; width:0; height:0; left:0; top:0;"></iframe>

JavaScript / jQuery 

$(document).ready(function() {
    window.onpopstate = function(event) {
        $("iframe").prop("src", "");
        $("iframe").css("width", "0").css("height", "0");
    };

    $(".d").on('click', function() {
        window.history.pushState({},"Thanks","http://localhost/a/details.php?p=" + $(this).text());
        $("iframe").prop("src", "http://localhost/a/details.php?p=" + $(this).text());
        $("iframe").css("width", "100%").css("height", "100%");
    });
});

Что я хочу для этого сделать, так это отобразить iframe с новым URL-адресом в адресной строке (эта часть работает), и после нажатия кнопки «Назад» вернуть меня на старую страницу после сокрытия iframe и сброса URL-адреса..

Базовый сервер для всех файлов: http://localhost/a/

...