Question

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

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

Answer 1

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

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

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

Answer 2

您可以使用javascript location.replace：

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

用。替换当前文档一个在提供的URL。该与assign（）方法的区别在于使用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之间差异的更多详细信息：Use of Iframe or Object tag to embed web pages in another

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的网址添加到浏览器历史记录中。

Answer 7

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

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 8

最简单快速的加载解决方案
使用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');"

如果由于某种原因，onload没有加载到iframe中，那么在语法中放置目标框架名称而不是窗口，如下所示：

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

注意：对于此脚本，所有onclick，onmouseover，onmouseout，onload和href="javascript:"都可以使用。

Answer 9

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

const container = iframe.parentElement;

container.removeChild(iframe);

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

container.appendChild(iframe);

Answer 10

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

var container = iframe.parentElement;

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

container.append(iframe);

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

10 个答案: