用 jQuery 重新加载 iframe

在一个页面上有两个 iframe，其中一个对另一个进行更改，但是另一个 iframe 在刷新之前不显示更改。有没有一种简单的方法可以用 jQuery 刷新这个 iframe？

<div class="project">
<iframe id="currentElement" class="myframe" name="myframe" src="http://somesite.com/something/new"></iframe>
</div>
350171 次浏览
小开
最佳答案

如果 iframe 不在其他域上，您可以执行以下操作:

document.getElementById(FrameID).contentDocument.location.reload(true);

但是由于 iframe 位于不同的域上，您将被 同一原产地政策拒绝访问 iframe 的 contentDocument属性。

但是，如果您的代码正在 iframe 的父页面上运行，那么您可以通过将其 src 属性设置为自身来强制跨域 iframe 重新加载。像这样:

// hackishly force iframe to reload
var iframe = document.getElementById(FrameId);
iframe.src = iframe.src;

如果您试图从另一个 iframe 重新加载 iframe，那么您就不走运了，那个是 没有的可能性。

小开

你也可以使用 JQuery，这和 Alex 仅仅使用 JQuery 提出的建议是一样的:

 $('#currentElement').attr("src", $('#currentElement').attr("src"));
小开

只是用 jQuery 回复 Alex 的回答

var currSrc = $("#currentElement").attr("src");
$("#currentElement").attr("src", currSrc);
小开 
$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });
小开

使用简单的 JavaScript 就可以做到这一点。

  • 在 iFrame1中，创建一个在 body 标记 onload 中调用的 JavaScript 函数。我让它检查我设置的服务器端变量，所以它不会尝试在 iframe 2中运行 JavaScript 函数，除非我在 iframe 1中采取了特定的操作。您可以将其设置为由按钮触发的函数，或者在 iframe 1中按照您想要的方式。
  • 然后在 iframe 2中，有下面列出的第二个函数。Iframe1中的函数基本上转到父页面，然后使用 window.frames语法在 iframe2中激发一个 JavaScript 函数。只要确保使用 iframe 2的 id/name，而不是 src。
//function in iframe1
function refreshIframe2()
{
if (<cfoutput>#didValidation#</cfoutput> == 1)
{
parent.window.frames.iframe2.refreshPage();
}
}


//function in iframe2
function refreshPage()
{
document.location.reload();
}
小开

用 jQuery 重新加载 iframe

Make a link inside the iframe let say with id = “ reload”然后使用以下代码

$('#reload').click(function() {
document.location.reload();
});

你可以很好地适应所有的浏览器。

用 HTML 重新加载一个 iframe (没有 JavaScript 要求)

它有更简单的解决方案: 在没有 javaScript 的情况下(FF，Webkit)工作

在你的内心深处做一个锚

   <a href="#" target="_SELF">Refresh Comments</a>

当你点击这个锚点，它只是刷新你的 iframe

但是 如果你有参数发送到你的 iframe 然后这样做。

  <a id="comnt-limit" href="?id=<?= $page_id?>" target="_SELF">Refresh Comments</a>

不需要任何页面 URL，因为-> target = “ _ SELF”可以为您完成

小开

如果是跨域的，仅仅将 src 设置回相同的 URL 不会总是触发重新加载，即使位置散列发生了变化。

在手动构建 Twitter 按钮 iframe 时遇到了这个问题，当我更新网址时它不会刷新。

类似 Twitter 的按钮有如下形式: .../tweet_button.html#&_version=2&count=none&etc=...

由于 Twitter 使用文档片段作为 url，因此更改散列/片段不会重新加载源代码，按钮目标也不会反映我新加载的 ajax 内容。

您可以附加一个查询字符串参数以强制重新加载(例如: "?_=" + Math.random()，但这将浪费带宽，特别是在这个示例中，Twitter 的方法特别试图启用缓存。

要重新加载只使用散列标记更改的内容，您需要删除该元素，或者更改 src，等待线程退出，然后再将其分配回去。如果页面仍然被缓存，则不需要网络命中，但会触发帧重新加载。

 var old = iframe.src;
iframe.src = '';
setTimeout( function () {
iframe.src = old;
}, 0);

更新 : 使用此方法创建不需要的历史记录项。相反，每次都要删除并重新创建 iframe 元素，这样可以让这个 back ()按钮按预期工作。没有计时器也不错。

小开 
    ifrX =document.getElementById('id') //or
ifrX =frames['index'];

跨浏览器的解决方案是:

    ifrX.src = ifrX.contentWindow.location

这对于 < iframe > 是 < form > 的目标时尤其有用

小开

你可以使用 jquery:

$('#iframeid',window.parent.document).attr('src',$('#iframeid',window.parent.document).attr('src'));
小开

下面的解决方案肯定会奏效:

window.parent.location.href = window.parent.location.href;
小开

解决了！我注册 stockoverflow 只是为了分享唯一有效的解决方案(至少在 asp.net/ie/ff/chrome ) ！其思想是将 div 的 innerHTML 值替换为其当前的 innerHTML 值。

下面是 HTML 代码片段:

<div class="content-2" id="divGranite">
<h2>Granite Purchase</h2>
<IFRAME  runat="server" id="frameGranite" src="Jobs-granite.aspx" width="820px" height="300px" frameborder="0" seamless  ></IFRAME>
</div>

还有我的 Javascript 代码:

function refreshGranite() {
var iframe = document.getElementById('divGranite')
iframe.innerHTML = iframe.innerHTML;
}

希望这个能帮上忙。

小开

我很确定上面的所有示例都只是使用原来的 src 重新加载 iframe，而不是当前的 URL。

$('#frameId').attr('src', function () { return $(this).contents().get(0).location.href });

应该使用当前 URL 重新加载。

小开

只是用 jQuery 回复 Alex 的回答:

var e = $('#myFrame');
e.attr("src", e.attr("src"));

或者你可以使用小函数:

function iframeRefresh(e) {
var c = $(e);
c.attr("src", c.attr("src"));
}

希望能有所帮助。

小开

还有一个办法

$( '#iframe' ).attr( 'src', function () { return $( this )[0].src; } );
小开

你需要利用

[0]

要查找 iframe 的源及其 URL，需要位于父节点的同一域中。

setInterval(refreshMe, 5000);
function refreshMe() {
$("#currentElement")[0].src = $("#currentElement")[0].src;
}
小开 
$('IFRAME#currentElement').get(0).contentDocument.location.reload()
小开

//刷新页面上的所有 iframe

var f_list = document.getElementsByTagName('iframe');


for (var i = 0, f; f = f_list[i]; i++) {
f.src = f.src;
}
小开

你可以这样做

$('.refrech-iframe').click(function(){
$(".myiframe").attr("src", function(index, attr){
return attr;
});
});

提交答案