需要两次点击后退按钮才能触发popstate/statechange事件

我有一个包含iframe的页面。 iframe可以接受用户的输入（通过按钮点击或菜单选择）并相应地显示内容。我需要的是，当用户操作iframe时，浏览器将每组iframe参数推入历史;当用户点击后退按钮时，iframe将使用上一个历史记录条目中保存的参数重新加载其内容。我有一段代码进行重新加载，如下所示。需要两次点击后退按钮才能触发popstate/statechange事件

奇怪的是，当我在IFRAME（添加到历史，因此多状态条目）进行多项设置，然后单击回来，它会像这样工作

说，我的状态4 ，3，2的历史和我现在在状态5

第一次点击恢复到状态4（“----状态改变----”日志消息被打印
第二点击重新加载默认内容的iframe，“---- state changed ----”不会被打印，不会重新加载代码
第三次点击恢复到状态3
第四点击，就如同第二点击
5日点击恢复到状态2

所以以后每一次点击，成功地恢复状态，需要两次点击来触发popstate事件（我也试过statechanged事件，结果相同）并恢复到另一个先前的状态。

任何人都知道这里发生了什么？提前致谢。

History.Adapter.bind(window, "popstate", 
    function (event) { 
     console.log("----state changed------", History.getState()); 
     console.log("----state data------",History.getState().data.state); 

      //code to do reload an iframe to its proper state 

    });

来源

2013-05-15 Farrell

所以我偶然发现了同样的问题。我们遇到的情况是使用history.pushState()更新URL，然后更改的src属性。通过更改的src，我们隐含地告诉浏览器添加iframe已更改的历史记录。因此...

当我们压回的第一次，window.history的popstate是引发了的src属性，并恢复到之前的状态。
按back第二次触发popstate事件您最初压入堆栈

我们的解决方案涉及到，当我们决定更新URL和推动国家入栈中，当我们想要的状态更新，我们使用jQuery来代替列表，以便...

$("#iFrameID").replaceWith(('<iframe id="iFrameID" src="' + location + '"></iframe>'

通过这样做，我们去掉了浏览器历史记录的副作用与我们更新到标签越来越污染。

来源

2014-01-09 22:10:46 Kevin

如果你想用你的'iframe'来做更复杂的事情，比如POST，这是行不通的。我的意思是这是可能的，但它需要一个非常完整的脚本（以处理所有边界情况）通过Ajax执行POST。此时，您甚至不需要设置iframe的网址，但只需更新它的内容，此时这个简单的解决方案可悲地变得没有实际意义。：/我仍然在寻找一种更简单的方法来处理... – Domi

我有同样的问题。而不是导航用户到网站上的上一页，后退按钮导航用户到iframe中的上一页。下面的代码将帮助你解决你的问题：

iframe.contentWindow.location.replace(href)

来源

2015-08-14 15:16:52 user3918128

需要两次点击后退按钮才能触发popstate/statechange事件

回答

相关问题