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

【问题标题】：Two clicks at back button are necessary to trigger popstate/statechange event需要两次单击后退按钮才能触发 popstate/statechange 事件
【发布时间】：2013-05-10 12:51:13
【问题描述】：

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

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

假设我在历史上有状态 4、3、2，而我现在处于状态 5

第一次单击恢复到状态 4（打印“----state changed----”日志消息
第二次单击会使用默认内容重新加载 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

    });

【问题讨论】：

标签： iframe history back-button popstate

【解决方案1】：

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

当我们第一次按下返回时，window.history 的 popstate 是在<iframe> 的 src 属性上触发并恢复到之前的状态。
再次按下会触发您最初压入堆栈的状态的 popstate 事件

我们的解决方案涉及到，当我们决定更新 URL 并将状态推送到堆栈时，当我们想要更新 <iframe> 时，我们使用 jQuery 替换了 <iframe> 列表，所以...

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

通过这样做，我们消除了浏览器历史记录因更新 <iframe> 标记而受到污染的副作用。

【讨论】：

这行不通，如果你想用你的iframe做更复杂的事情，比如POST。我的意思是这是可能的，但它需要一个非常完整的脚本（处理所有边缘情况）才能通过 Ajax 执行 POST。那时，您甚至不需要再设置 iframe 的 url，而只需更新它的内容，此时这个简单的解决方案已变得毫无意义。 :/ 我仍在寻找一种更简单的方法来处理它...

【解决方案2】：

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

iframe.contentWindow.location.replace(href)

【讨论】：