更新iframe，历史和URL。然后使其与后退按钮一起工作 [英] Updating an iframe, history and URL. Then making it work with back button

问题描述

我在点击浏览器上的后退按钮时遇到问题（我正在使用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事件很有趣。 $ b

https://developer.mozilla.org/en- US / docs / Web / Events / popstate

首先，我将更改几行代码......

  function updateURLBar（urlInfo）{
 //我们可以稍后再获取这个stateObj ... 
 var stateObj = {
 foo：bar，
 url：urlInfo [1] 
}; 
 
 //document.getElementById(\"iframeContent\").src = urlInfo [1]; 
 
 //参见编辑注释
 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）{
 //记住我们的状态对象？ 
 changeIframeSrc（document.getElementById（iframeContent）），event.state.url）; //见编辑说明。 
}; 
  

编辑

Iframe警告

使用pushState并更改 iframe src属性存在问题。如果 iframe 在DOM中，并且您更改了 src 属性，则会为浏览器历史记录添加一个状态叠加。因此，如果使用 history.pushState 和 iframe.src = url ，那么您将创建2个历史记录。 / p>

解决方法

更改 src iframe 不在DOM中时， iframe 元素的c $ c>属性不推送到浏览器历史堆栈。因此，你可以建立一个新的 iframe ，把它设为 src 属性，然后将旧的 iframe 替换为新的

  var changeIframeSrc = function（iframe，src）{
 var frame = iframe.cloneNode（）; 
 frame.src = src; 
 iframe.parentNode.replaceChild（frame，iframe）; 
}; 
  

I'm having problems getting URL to update when hitting the back button on the browser (I'm on testing on Firefox). After updating the "src" property of the iframe I use replaceState to update the history. If I hit the back button after this the iframe will go back to the previous page but the URL does not update to reflect this.

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

Am I going about this the wrong way or am I just missing something. Thanks for any help in advanced!

解决方案

You may find the popstate event interesting.

https://developer.mozilla.org/en-US/docs/Web/Events/popstate

First, I would change few lines of code that you have...

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]);
}

And then you can add:

window.onpopstate = function(event) {
    //Remember our state object?
    changeIframeSrc( document.getElementById("iframeContent") ),event.state.url); // see EDIT notes.
};

EDIT

The Iframe caveat

There is a problem with using pushState and changing iframe src attributes. If an iframe is in the DOM, and you change the src attribute, this will add a state to the browsers history stack. Therefore, if you use history.pushState with iframe.src = url, then you will create 2 history entries.

The Workaround

Changing the src attribute of an iframe element when the iframe is not in the DOM will not push to the browsers history stack.

Therefore you could build a new iframe, set it's src attribute, and then replace the old iframe with the new one.

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

这篇关于更新iframe，历史和URL。然后使其与后退按钮一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！