标签：html javascript iframe browser-history

在浏览器中单击“后退”按钮时,我无法获取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]);
}

我是用错误的方式走还是我只是想念一些东西.感谢您对高级的任何帮助！

解决方法:

您可能会发现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);
};

标签：html,javascript,iframe,browser-history
来源： https://codeday.me/bug/20191012/1898866.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。