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

Question

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

但它增加了一个条目，我不想要的历史。有什么方法可以重新加载IFRAME，但不会影响历史记录？

Answer 1

您可以使用JavaScript location.replace：

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

与 一个所提供网址替换当前文档。从分配（）方法 区别是 ，使用更换后的（）当前 页面不会被保存在会议 历史，这意味着用户将不能 能够使用后退按钮 导航。

Answer 2

像Greg上面说的那样，.replace（）函数是如何做到这一点的。我似乎无法弄清楚如何回复他的答案*，但诀窍是引用iFrames的contentWindow属性。

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

*刚学会了我需要更多的声望来评论答案。

Answer 3

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

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

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

Answer 4

尝试使用此功能，以取代旧的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 5

重新创建iframe的替代方法是从DOM中删除iframe，更改src然后重新添加它。

在很多方面，这与replace()建议类似，但是当我用History.js尝试这种方法并手动管理状态时，我遇到了一些问题。

var container = iframe.parent(); 

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

container.append(iframe); 

Answer 6

一种解决方案是使用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 7

最简单，最快速装载解决方案
使用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 8

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