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

Question

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

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

Answer 1

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

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

编辑: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:使用Iframe或Object标记将网页嵌入到另一个网页中

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