Javascript 在不添加历史记录的情况下重新加载IFRAME

我正在更改IFRAME的

src

以重新加载它，它工作正常，并在加载HTML时触发

onload

事件

但它在历史记录中添加了一个条目，我不想这样。有没有办法重新加载IFRAME而不影响历史记录？

您可以使用javascript：

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

---

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

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

*刚刚了解到，我需要更多的声誉来评论答案。

使用replace（）只是您自己的域iFrame的一个选项。它无法在远程站点上工作（例如：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");

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

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

---

这种方法不会将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"/>

将允许您在不影响历史记录的情况下更新

数据

属性。如果您使用声明性框架，例如

React.js

，而您不需要执行任何命令来更新DOM，那么这将非常有用

---

有关

iframe

和

object

之间差异的更多详细信息：

最简单、最快速的加载解决方案
使用

window.location.replace

加载页面或框架时不更新历史记录

对于链接，它如下所示：

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

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

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

如果出于某种原因，iframe中没有加载onload，则将您的目标帧名称而不是窗口置于如下语法中：

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

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

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

---

注意：对于此脚本，所有

onclick

，

onmouseover

，

onmouseout

，

onload

和

href=“javascript:

都将起作用。

使用

replace

方法绕过将iframe的URL添加到历史中：

HTML:

JavaScript:

var ifr=document.getElementById（'mIframe'））
如果（ifr）{
ifr.contentWindow.location.replace（'http://www.blabla.com')
}

JDandChips answer在跨源iframe（youtube）上为我工作，这里是香草JS（没有JQuery）：

---

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

var container = iframe.parentElement;

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

container.append(iframe);

---

我猜问题是“后退”按钮实际上会在进入上一页之前在iframe中循环。无论它做什么，我都不想添加任何历史记录，或者有没有办法删除最新的历史记录条目？这不是针对页面本身吗？我只想重新加载IFRAME，但我无法控制加载文档中运行的脚本。只需将“窗口”替换为对IFRAME的引用。为什么不这么简单？var ifr=document.getElementById（“iframeId”）；ifr.location.replace（ifr.src）；尝试使用

window.frames['frame\u name'].location

您也可以使用

iframe.contentWindow.location.replace（href）虽然此答案比公认的答案新2年，但这是在不添加浏览器历史记录的情况下更改iframe URL/src的正确方法。出于安全原因，window.frames[frameName].location和/或history.replaceState的任何其他组合在iframe中都不起作用。即使是在同一个领域（正如我刚刚发现的），这是我尝试过的最好的工作答案。解决了我的问题。解决办法就是这个！我需要创建iframe以便历史保持完整。很好的答案。我试图添加带有iframe和angular的vimeo嵌入式视频，类似这样：
。在angular设置iframe url之前，html试图用错误的url加载iframe，如
{{item.url}}
，结果是iframe的src发生了更改，导致浏览器历史记录问题！解决方案是稍后使用jquery在渲染完所有内容后创建iframe。如果url从iframe本身内部更改（例如，如果用户单击或J.S.重定向到iframe内的第二页），是否也会出现此问题？我不会直接通过DOM更改iframe src。例如：我的SPA中的iframe中嵌入了一个AdobeiSign页面，该页面重定向到同一iframe中的感谢页面（然后感谢页面将windows.postmessage发送回我的主框架，以便我可以关闭iframe）。。。但此时单击“我的SPA”中的“浏览器后退”按钮似乎想“离开页面”（当用户离开SPA时触发my window.beforeunload事件）。这很方便。谢谢我真的很喜欢这样：事实证明这比创建一个新的iframe要容易得多，因为您不需要将所有属性复制到新的iframe（id、size、style类等）中，这是一个很好的发现。这样