如何使用 Javascript 刷新 IFrame?

我有一个与 IFrame 和按钮的网页,一旦按下按钮,我需要 IFrame 被刷新。这可能吗,如果可能,怎么可能?我搜索了一下,但是没有找到任何答案。

369443 次浏览
var iframe = document.getElementById('youriframe');
iframe.src = iframe.src;

这应该会有所帮助:

document.getElementById('FrameID').contentWindow.location.reload(true);

编辑: 按照@Joro 的注释修正了对象名。

这是 给你台的

var f = document.getElementById('iframe1');
f.src = f.src;

如果 iframe 是从同一个域加载的,那么可以这样做,这样做更有意义:

iframe.contentWindow.location.reload();

下面是 HTML 代码片段:

<td><iframe name="idFrame" id="idFrame" src="chat.txt" width="468" height="300"></iframe></td>

还有我的 Javascript 代码:

window.onload = function(){
setInterval(function(){
parent.frames['idFrame'].location.href = "chat.txt";
},1000);}

如果页面中有多个 iFrame,那么这个脚本可能会很有用。我假设在 iFrame 源代码中有一个特定的值,可以用来查找特定的 iFrame。

var iframes = document.getElementsByTagName('iframe');
var yourIframe = null
for(var i=0; i < iframes.length ;i++){
var source =  iframes[i].attributes.src.nodeValue;
if(source.indexOf('/yourSorce') > -1){
yourIframe = iframes[i];
}
}
var iSource = yourIframe.attributes.src.nodeValue;
yourIframe.src = iSource;

用您需要的值替换“/yourSource”。

为 IE,Mozzila,Chrome 工作

document.getElementById('YOUR IFRAME').contentDocument.location.reload(true);

你可以用这个:

Js:

function refreshFrame(){
$('#myFrame').attr('src', "http://blablab.com?v=");
}

网址:

`<iframe id="myFrame" src=""></iframe>`

小提琴: https://jsfiddle.net/wpb20vzx/

如果 iframe 的 URL 没有改变,您可以重新创建它。

如果你的 iframe 不是来自同一个源(协议方案、主机名和端口) ,你将无法知道 iframe 中当前的 URL,所以你需要在 iframe 文档中有一个脚本来和它的父窗口(页面的窗口)交换消息。

在 iframe 文件中:

window.addEventListener('change', function(e) {
if (e.data === 'Please reload yourself') {
var skipCache = true; // true === Shift+F5
window.location.reload(skipCache);
}
}

在你的页面上:

var iframe = document.getElementById('my-iframe');
var targetOrigin = iframe.src; // Use '*' if you don't care
iframe.postMessage('Please reload yourself', targetOrigin);

您可以使用这个简单的方法

function reloadFrame(iFrame) {


iFrame.parentNode.replaceChild(iFrame.cloneNode(), iFrame);


}

直接重置 src 属性:

iframe.src = iframe.src;

重置带有缓存破坏时间戳的 src:

iframe.src =  iframe.src.split("?")[0] + "?_=" + new Date().getTime();

当查询字符串选项不可用时清除 src (数据 URI) :

var wasSrc = iframe.src


iframe.onload = function() {
iframe.onload = undefined;
iframe.src = wasSrc;
}

2017年:

如果它在同一领域只是:

iframe.contentWindow.location.reload();

会成功的。

如果你使用的散列路径(比如 mywebsite.com/#/my/url )在切换散列时可能不会刷新帧:

<script>
window.onhashchange = function () {
window.setTimeout(function () {
let frame = document.getElementById('myFrame');
if (frame !== null) {frame.replaceWith(frame);}
}, 1000);
}
</script>

不幸的是,如果您不使用超时 JS 可能会尝试在页面加载完内容之前替换框架(从而加载旧内容)。我还不确定有没有解决办法。