浏览器返回作用于页面本身之前的嵌套 iframe - 有没有办法避免它？

Posted 2023-03-05

【中文标题】浏览器返回作用于页面本身之前的嵌套 iframe - 有没有办法避免它？

【英文标题】：browser back acts on nested iframe before the page itself - is there a way to avoid it?

【发布时间】：2011-01-15 19:06:51

【问题描述】：

我有一个页面，其中包含由一些 ajax 和大量 javascript 加载的动态数据。

页面包含一个列表，用户可以从中选择，每个选定的值都会将新数据加载到页面。

其中一个数据项是提供给 iframe 的 url。

我使用jQuery BBQ: Back Button & Query Library 来模拟浏览器返回行为。

除了当我第一次单击后退按钮时 iframe 会返回到之前的位置，然后我需要再次单击后退以使页面返回。

有没有办法禁用 iframe 的后退行为？

【问题讨论】：

我对这个问题的答案很感兴趣；我的理解（可能不正确）是页面对浏览器对“后退”按钮的操作几乎没有控制。或者“前进”按钮。

【参考方案1】：

我在引导模式中管理跨域 iframe，唯一对我有用的解决方案是将以下代码放在每个 iframe 页面的头部：

    history.pushState(null, null, location.href);
    window.onpopstate = function () 
      history.go(1);
    ;

这不适用于所有人，因为您需要控制 iframe 内容，此外它会破坏父窗口的历史链

【参考方案2】：

如果您尝试为 IFrame 设置跨域 URL，则接受的答案似乎不起作用。作为一种解决方法，我在设置 src（使用 jQuery）之前从 DOM 中分离了 IFrame。

// remove IFrame from DOM before setting source, 
// to prevent adding entries to browser history
var newUrl = 'http://www.example.com';
var iFrame = $('#myIFrame');
var iFrameParent = iFrame.parent();

iFrame.remove();
iFrame.attr('src', newUrl);
iFrameParent.append(iFrame);

【讨论】：

冬青牛，你真是个天才！

【参考方案3】：

基本上你需要防止在 iframe 中添加新的历史记录条目，html5 中引入的history.replaceState 在大多数情况下都可以工作。

history.pushState(state, title, url);

【讨论】：

在 iframe 内？例如，如果src="http:/google.com"，我该如何告诉 iframe 这样做？

【参考方案4】：

我建议您在 iframe 中创建一个超链接。将其称为“返回”并将 href 设置为 javascript:history.back(-1) 我认为这是您能做的最好的事情。

【参考方案5】：

我已经找到了我的问题的答案，我猜它可能对其他人有用。

问题在于我为 iframe 分配新 URL 的方式，我使用了 Jquery，所以它看起来像这样：

$('#myIFrame').attr('src',newUrl);

以这种方式分配 URL 时，它会在浏览器的已访问 URL 列表中添加一个新条目以返回。 这不是我们想要的行为，所以经过一番谷歌搜索后，我发现您可以为 iframe 对象分配一个新 URL，而无需将其添加到“后备列表”中，它看起来像这样：

var frame = $('#myIFrame')[0];  
frame.contentWindow.location.replace(newUrl);

这样我的后退按钮的行为完全符合预期。

顺便说一句，我的回答来自here。

希望这对你有帮助，就像对我一样。

【讨论】：

谢谢，这正是我遇到的问题。真的很有帮助。

这仅适用于与嵌入它的网站具有相同域的 iframe。不适用于跨域 iframe。

当我提交带有 target="myIFrame" 的表单指向 iframe 时，如何使用此代码？？

你拯救了我的一天，我的好先生！哇 - 多么奇怪的经历！

【参考方案6】：

不，这完全取决于浏览器。