Обновление iframe, истории и URL. Затем, заставляя его работать с кнопкой «Назад»

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

 function updateURLBar(urlInfo) { var stateObj = { foo: "bar" }; document.getElementById("iframeContent").src = urlInfo[1]; window.history.replaceState(stateObj, "page 2", urlInfo[0]); } 

Я иду об этом неправильно, или я просто что-то пропустил. Спасибо за любую помощь в продвинутом!

Вы можете найти интересное событие для popstate.

https://developer.mozilla.org/en-US/docs/Web/Events/popstate

Во-первых, я бы изменил несколько строк кода, которые у вас есть …

 function updateURLBar(urlInfo) { //we can get this stateObj later... var stateObj = { foo: "bar", url: urlInfo[1] }; //document.getElementById("iframeContent").src = urlInfo[1]; // see EDIT notes changeIframeSrc(document.getElementById("ifameContent"), urlInfo[1]); //window.history.replaceState(stateObj, "page 2", urlInfo[0]); window.history.pushState(stateObj, "Page 2", urlInfo[0]); } 

И затем вы можете добавить:

 window.onpopstate = function(event) { //Remember our state object? changeIframeSrc( document.getElementById("iframeContent") ),event.state.url); // see EDIT notes. }; 

РЕДАКТИРОВАТЬ

Предупреждение Iframe

Существует проблема с использованием pushState и изменением атрибутов iframe src. Если iframe находится в DOM, и вы изменяете атрибут src , это добавит состояние в стек истории браузеров. Поэтому, если вы используете history.pushState с iframe.src = url , тогда вы создадите 2 записи истории.

Обходной путь

Изменение атрибута src элемента iframe когда iframe не находится в DOM, не будет нажимать на стек истории браузеров.

Поэтому вы можете создать новый iframe , установить его атрибут src , а затем заменить старый iframe на новый.

 var changeIframeSrc = function(iframe, src) { var frame = iframe.cloneNode(); frame.src = src; iframe.parentNode.replaceChild(frame, iframe); };