更新 iframe、历史记录和 URL。然后使其与后退按钮一起使用

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 个历史条目。

解决方法

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

因此您可以构建一个新的 iframe，设置它的 src 属性，然后用新的 iframe 替换旧的 iframe。

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

更新 iframe、历史记录和 URL。然后使其与后退按钮一起使用

Updating an iframe, history and URL. Then making it work with back button

javascript

html

iframe

browser-history

编辑