Iframe 在返回按钮上单击两下是触发popstate/statechange事件所必需的

我有一个包含iframe的页面。iframe可以接受用户的输入（通过按钮单击或菜单选择）并相应地显示内容。 我需要的是，当用户操纵iframe时，浏览器将每组iframe参数推送到历史中；当用户单击“后退”按钮时，iframe将使用上一个历史记录条目中保存的参数重新加载其内容。我有一段代码在重新加载，如下所示

奇怪的是，当我在iframe上进行多个设置（因此将多个状态条目添加到历史记录中），然后单击后面，它会像这样工作

假设我在历史上有第四、第三、第二个州，而我现在在第五个州

第一次单击restore to state 4（将打印“----状态已更改----”日志消息）

第二次单击将使用默认内容重新加载iframe。不会打印“----状态更改----”；不会调用重新加载代码

第三次单击“恢复到状态3”

第四次单击与第二次单击类似

第五次单击“恢复到状态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

    }); 

---

所以我偶然发现了同样的问题。我们使用的是

history.pushState（）

更新URL，然后在此之后更改

的

src

属性。通过更改

的

src

，我们隐含地告诉浏览器向其历史记录中添加iframe已更改。因此

当我们第一次按下返回键时，

window.history

的状态为 在

的src属性上触发，并恢复到以前的状态

第二次按back键将触发最初推送到堆栈上的状态的

popstate

事件

我们的解决方案涉及到，当我们决定更新URL并将状态推送到堆栈上时，当我们想要更新

时，我们使用jQuery替换

列表，以便

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

$（“#iFrameID”）。替换为（“”

---

通过这样做，我们消除了浏览器历史记录因更新

标记而受到污染的副作用。

我也遇到了同样的问题。不是将用户导航到网站上的上一页，而是使用“后退”按钮将用户导航到iframe内的上一页。下面的代码将帮助您解决问题m:

iframe.contentWindow.location.replace(href)

---

如果你想用你的

iframe

做更复杂的事情，比如帖子，这是行不通的。我的意思是这是可能的，但它需要一个非常完整的脚本（来处理所有的边缘情况）通过Ajax发布。在这一点上，你甚至不需要再设置iframe的url，只需更新它的内容，而这一点上，这个简单的解决方案已经变得毫无意义了。：/我仍然在寻找一种更简单的方法来处理这个问题。。。