更新iframe,历史记录和网址.然后使用后退按钮使其工作

Question

当我点击浏览器上的后退按钮时,我遇到了更新URL的问题(我在Firefox上进行测试).更新iframe的"src"属性后,我用它replaceState来更新历史记录.如果我在此之后点击后退按钮,iframe将返回上一页但URL不会更新以反映这一点.

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

我是以错误的方式解决这个问题,还是我错过了一些东西.感谢先进的任何帮助!

Answer 1

您可能会发现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和更改iframesrc属性时出现问题.如果a iframe在DOM中,并且您更改了src属性,则会向浏览器历史堆栈添加状态.因此,如果您使用history.pushState与iframe.src = url,那么您将创建2个历史条目.

解决方法

当不在DOM中时更改元素的src属性将不会推送到浏览器历史堆栈.iframeiframe

因此,您可以构建一个新的iframe,设置它的src属性,然后将旧的替换为新的属性iframe.

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