更新 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 替换为新的。

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