重新加载 IFRAME 而不增加历史记录

我正在改变一个 IFRAME 的 src，以便重新加载它，它的工作良好，并在其 HTML 加载时触发 onload事件。

但它增加了一个历史条目，这是我不想要的。有没有办法重新加载 IFRAME 而又不影响历史？

43972 次浏览
小开
最佳答案

你可以使用 javascript location.replace:

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

方法替换当前文档 一个在提供的网址 与赋值()方法的不同之处在于 在使用 place ()之后，当前 页将不会在会话中保存 历史记录，这意味着用户不会 能够使用后退按钮 找到它。

小开

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

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

刚刚得知我需要更多的名声来评论一个答案 * 。

小开

对于您自己的域 iframe，只能使用 place ()。它不能在远程站点上工作(例如: 一个 twitter 按钮) ，并且需要一些浏览器特定的知识来可靠地访问子窗口。

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

编辑: JDandChips 正确地提到您可以从 DOM 中删除、修改和重新附加。

小开

尝试使用这个函数将旧的 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 添加到浏览器历史记录中。

小开

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

在许多方面，这类似于 replace()的建议，但是当我使用 History.js 和手动管理状态时，我遇到了一些问题。

var container = iframe.parent();


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


container.append(iframe);
小开

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

取而代之的是:

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

通过这个:

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

将允许您在不影响历史的情况下更新 data属性。如果使用诸如 React.js之类的声明性框架，而不应该执行任何命令式命令来更新 DOM，那么这将非常有用。

更多关于 iframe和 object之间差异的细节: 使用 Iframe 或 Object 标记将网页嵌入到另一个

小开

最简单快速的加载解决方案
在加载页面或框架时，使用 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 中加载，那么在语法中将您的目标框架名称替换为 window，如下所示:

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



注意: 对于这个脚本，所有的 onclick、 onmouseover、 onmouseout、 onload和 href="javascript:"都可以工作。

小开

使用 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')
}
小开

JDandChips 的答案适用于交叉起源的 iframe (youtube) ，这里是普通的 JS (没有 JQuery) :

const container = iframe.parentElement;


container.removeChild(iframe);


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


container.appendChild(iframe);
小开

@ JDandChips 有一个很好的答案，但是语法应该从 家长()更新到 ParentElement:

var container = iframe.parentElement;


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


container.append(iframe);

提交答案