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

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

但这为历史添加了一个条目，我不想。有什么方法可以重新加载IFRAME而不影响历史记录吗？

您可以使用javascript location.replace：

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

用提供的URL中的文档替换当前文档。与Assign（）方法的区别在于，使用replace（）之后，当前页面将不会保存在会话历史记录中，这意味着用户将无法使用“后退”按钮导航到该页面。

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

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

编辑：JDandChips正确地提到您可以从DOM中删除，修改并重新添加。不需要构造新鲜的。

就像上面的Greg一样，.replace（）函数就是执行此操作的方法。我似乎无法弄清楚如何回答他的答案*，但诀窍是引用iFrames contentWindow属性。

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

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

重新创建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标签将网页嵌入另一个

尝试使用此功能将旧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的网址添加到浏览器历史记录中。

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

最简单，最快速的加载解决方案
用于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中将其放在iframe文件主体部分中：

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

如果由于某种原因未在iframe中加载onload，请使用以下语法将目标框架名称而不是window放置：

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

注：对于此脚本所有onclick，onmouseover，onmouseout，onload和href="javascript:"将工作。

JDandChips答案在跨源iframe（youtube）上为我工作，这是在普通JS中（没有JQuery）：

const container = iframe.parentElement;

container.removeChild(iframe);

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

container.appendChild(iframe);

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

var container = iframe.parentElement;

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

container.append(iframe);