重新加载 IFRAME 而不添加到历史记录

Question

我正在更改 IFRAME 的 src 以便重新加载它，它工作正常，并在加载 HTML 时触发 onload 事件。

但它在历史中添加了一个条目，这是我不想要的。 有什么方法可以重新加载 IFRAME 并且不影响历史记录吗？

Answer 1

使用replace()只是您自己的域iframe的一个选项。 它无法在远程站点（例如：twitter 按钮）上工作，并且需要一些特定于浏览器的知识才能可靠地访问子窗口。

相反，只需删除 iframe 元素并在同一位置构造一个新元素即可。 仅当您在 DOM 中修改 src 属性后才会创建历史记录项，因此请确保在追加之前设置它。

编辑：JDandChips 正确地提到您可以从 DOM 中删除、修改和重新附加。 不需要构建新鲜的。

Answer 2

您可以使用 javascript location.replace：

window.location.replace('...html');

将当前文档替换为
位于提供的 URL 中的一个。 这
与 allocate() 方法的区别是
使用replace()后当前
页面不会保存在会话中
历史记录，这意味着用户不会
能够使用后退按钮
导航到它。

Answer 3

就像 Greg 上面所说的那样，.replace() 函数就是如何做到这一点的。 我似乎不知道如何回复他的答案*，但诀窍是引用 iFrames contentWindow 属性。

var ifr = document.getElementById("iframeId");
ifr.contentWindow.location.replace("newLocation.html"); 

*刚刚得知我需要更多声誉才能对答案发表评论。

Answer 4

重新创建 iframe 的另一种方法是从 DOM 中删除 iframe，更改 src，然后重新添加它。

在很多方面，这与 replace() 建议类似，但当我尝试使用 History.js 尝试这种方法并手动管理状态时，我遇到了一些问题。

var container = iframe.parent();

iframe.remove();
iframe.attr('src', 'about:blank');

container.append(iframe);

Answer 5

一种解决方案是使用 object 标记而不是 iframe 标记。

替换此：

<iframe src="http://yourpage"/>

通过此：

<object type="text/html" data="http://yourpage"/>

将允许您更新 data 属性而不影响历史记录。 如果您使用声明式框架（例如React.js），并且您不应该执行任何命令式命令来更新 DOM，那么这非常有用。

有关 iframe 和 object 之间差异的更多详细信息：使用 Iframe 或对象标记将网页嵌入到另一个页面

Answer 6

尝试使用此功能将旧 iframe 替换为从旧 iframe 复制的新 iframe：

function setIFrameSrc(idFrame, url) {
    var originalFrame = document.getElementById(idFrame);
    var newFrame = document.createElement("iframe");
    newFrame.id = originalFrame.getAttribute("id");
    newFrame.width = originalFrame.getAttribute("width");
    newFrame.height = originalFrame.getAttribute("height");
    newFrame.src = url;    
    var parent = originalFrame.parentNode;
    parent.replaceChild(newFrame, originalFrame);
}

像这样使用它：

setIFrameSrc("idframe", "test.html");

这种方式不会将 iframe 的 URL 添加到浏览器历史记录中。

Answer 7

JDandChips 答案在跨源 iframe (youtube) 上为我工作，这里是 vanilla JS (没有 JQuery)：

const container = iframe.parentElement;

container.removeChild(iframe);

iframe.setAttribute('src', 'about:blank');

container.appendChild(iframe);

Answer 8

使用 replace 方法绕过将 iframe 的 URL 添加到历史记录中：

HTML:

<iframe id="myIframe" width="100%" height="400" src="#"></iframe>

JavaScript:

var ifr = document.getElementById('mIframe')
if (ifr) {
  ifr.contentWindow.location.replace('http://www.blabla.com')
}

Answer 9

@JDandChips 上面有一个很好的答案，但语法应该从 parent() 更新为 parentElement：

var container = iframe.parentElement;

iframe.remove();
iframe.attr('src', 'about:blank');

container.append(iframe);

Answer 10

最简单、快速的加载解决方案
使用 window.location.replace 在加载页面或框架时不更新历史记录。

对于链接，它看起来像这样：

<a href="#" onclick="YourTarget.location.replace ('http://www.YourPage.com');">
The targeted Link</a>

或

<a href="javascript:YourTarget.location.replace ('http://www.YourPage.com');">
The targeted Link</a>

但是如果您希望它不从链接执行而是在加载框架时自动执行，那么您应该将其放在 iframe 文件正文部分中：

onload="window.location.replace ('http://www.YourPage.com');"

如果由于某种原因 onload 不执行不在 iframe 中加载，然后将目标框架名称而不是窗口放在语法中，如下所示：

onload="YourTarget.location.replace ('http://www.YourPage.com');"

注意：对于此脚本，所有 onclick、onmouseover、onmouseout 、onload 和 < code>href="javascript:" 可以工作。

Answer 11

还有一个很好的解决方案，通过设置 iframe 的 key 属性来防止 iframe 添加到历史记录。

特别是如果使用像...

react

<iframe key={contentId} src={`embedded/content/${contentId}`} />

vue

<iframe :key="contentId" :src="src" />

这样的框架，可以在这里找到非常详细的说明：

https://www.aleksandrhovhannisyan.com/blog/react-iframes-back-navigation-bug/