我正在更改 IFRAME 的 src 以重新加载它，它工作正常并在其 HTML 加载时触发 onload 事件。
但它在历史记录中添加了一个条目，这是我不想要的。有什么方法可以重新加载 IFRAME 而又不影响历史记录？
【问题讨论】：
标签： javascript html iframe
你可以使用javascriptlocation.replace:
window.location.replace('...html');
将当前文档替换为 一个在提供的 URL。这 与 assign() 方法的区别是 使用 replace() 后，当前 页面不会保存在会话中 历史，这意味着用户不会 能够使用返回按钮 导航到它。
【讨论】：
window.frames['frame_name'].location
iframe.contentWindow.location.replace(href);
就像 Greg 上面所说的， .replace() 函数就是如何做到这一点的。我似乎不知道如何回复他的答案*，但诀窍是引用 iFrames contentWindow 属性。
var ifr = document.getElementById("iframeId");
ifr.contentWindow.location.replace("newLocation.html");
*刚刚得知我需要更多声望才能对答案发表评论。
【讨论】：
使用 replace() 只是您自己的域 iframe 的一个选项。它无法在远程站点上工作（例如：twitter 按钮），并且需要一些特定于浏览器的知识才能可靠地访问子窗口。
相反，只需删除 iframe 元素并在同一位置构建一个新元素。只有在 src 属性在 DOM 中之后修改它时才会创建历史记录项，因此请确保在追加之前设置它。
编辑：JDandChips 正确地提到您可以从 DOM 中删除、修改和重新附加。不需要构建新鲜的。
【讨论】：
<div ng-repeat="item in ct.items"><iframe src="{{item.url}}"></iframe></div>。碰巧在 angular 设置 iframe url 之前，html 尝试使用错误的 url 加载 iframe，例如 {{item.url}}，结果是 iframe 的 src 更改了，导致浏览器历史记录问题！解决方案是稍后使用 jquery 创建 iframe，在 angular 渲染完所有内容之后。
尝试使用此功能将旧 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);
【讨论】：
$(modal).one('hidden.bs.modal', function() { $(modal_iframe).attr('src', 'about:blank').addClass('d-none'); var modalParent = $(modal_iframe).parent(); $(modal_iframe).remove(); $(modalParent).append($(modal_iframe)); });
一种解决方案是使用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
【讨论】：
最简单快速的加载方案
加载页面或框架时使用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 中加载，则将目标框架名称而不是 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) 上为我工作，这里是 vanilla 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);
【讨论】：