Question

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

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

说我历史上有状态4,3,2我现在处于状态5

第一次单击恢复到状态4（打印“---- state changed ----”日志消息
第二次点击会重新加载包含默认内容的iframe。 “----状态改变----”不打印;不会调用重新加载代码。
第三次单击还原到状态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

    });

Answer 1

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

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

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

<iframe>

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

Answer 2

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

position

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

2 个答案: