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

解决方法

当src不在DOM中时，更改iframe元素的iframe属性将不推送到浏览器历史记录堆栈。

因此，您可以构建新的iframe，设置它的src属性，然后将新的iframe替换为新的var changeIframeSrc = function(iframe, src) { var frame = iframe.cloneNode(); frame.src = src; iframe.parentNode.replaceChild(frame, iframe); };。

{{1}}

更新iframe，历史记录和网址。然后使用后退按钮

1 个答案:

修改