用jQuery重新加载iframe


150

我在页面上有两个iframe,一个对另一个iframe进行了更改,但是另一个iframe直到刷新后才显示更改。有没有一种简单的方法可以使用jQuery刷新此iframe?

<div class="project">
  <iframe id="currentElement" class="myframe" name="myframe" src="http://somesite.com/something/new"></iframe>
</div>

3
iframe文档是否在其他域中?
Pekka 2010年

您是否可以访问iFrame中显示的网站代码?
马特·阿斯伯里

显示更多代码-这两个iFrame的html以及用于进行更改的javascript代码。仅查看您到目前为止所包含的内容,很难找出问题所在。
李·李

我访问的代码是和iframe是在不同的领域
马特Elhotiby

@Matt,不允许框架更改其他域上框架的内容。有关如何解决此跨域脚本限制的示例,请参见:softwareas.com/cross-domain-communication-with-iframes
Ben Lee,2010年

Answers:


174

如果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 很不走运,是不可能的。


19
他的问题是如何使用jQuery(而不是Javascript)完成此任务。有关正确的jQuery答案,请参见下面的Sime Vidas帖子。
FastTrack 2012年

2
该脚本并没有在我的工作,IE9(不检查其他版本)。将contentDocument更改为contentWindow使其可以在IE9上运行。document.getElementById(FrameID).contentWindow.location.reload(true);
汉和

3
这对我没有用,但是我做了类似的事情 iframe.contentDocument.location=iframe.src; ,效果很好
glitchyme 2013年

3
这个Jquery对我来说就像一种魅力:$('#map_iframe').attr('src', $('#map_iframe').attr('src'));
Topher Hunt 2014年

234
$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });

2
+1是指仅拥有一个ID的引用,更改一个ID的可能性较小,却忘记了另一个ID
Matthew Lock

1
@NicolaeSurdu此外,这样的:(function (elem) { elem.src = elem.src; }($('#iframe')[0]));
森那维达斯

1
要将另一个iframe从另一个更改中重新加载为:$('#iframe',window.parent.document).attr('src',function(i,val){return val;});
Tillito

在Internet Explorer上,类似javascript的解决方案document.getElementById(FrameID).contentWindow.location.reload(true);无法正常工作。这个答案效果更好。
BeyazKaplan

54

您也可以使用jquery。这与Alex仅使用JQuery提出的建议相同:

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

3
该解决方案的优点是可读性。尽管效率不及维达斯(Vidas)的答案,但很明显正在发生什么。
罗伯特·艾金顿

我同意,我也倾向于此解决方案的可读性
Yonatan Naor

var f = $('#iframeX') ; f.attr( 'src', f.attr( 'src' ))可能更易于维护和阅读
Andreas Dietrich

9

用jQuery重新加载iframe

在iframe中建立链接,可以说id =“ reload”,然后使用以下代码

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

并且您很高兴与所有浏览器一起使用。

用HTML重新加载iframe(无需Java脚本)

它具有更简单的解决方案:在(FF,Webkit)中无需javaScript即可使用

只需在您的iframe中定位锚

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

当您点击此锚点时,它只会刷新您的iframe

但是, 如果您有将参数发送到iframe的步骤,请按照以下步骤进行操作。

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

不需要任何页面网址,因为-> target =“ _ SELF”为您做到了


9

使用jquery,您可以使用以下命令:

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

如果您要刷新当前的iframe,请使用此解决方案。多谢!
DaemonHK



3

我敢肯定,以上所有示例仅会使用其原始src而不是其当前URL重新加载iframe。

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

应该使用当前网址重新加载。


2

如果您是跨网域,则即使位置哈希值发生变化,仅将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()按钮按预期方式工作。也很高兴没有计时器。


2

只是往复Alex的答案,但使用jQuery:

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

或者您可以使用小功能:

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

希望对您有所帮助。



1

这可以通过简单的JavaScript来实现。

  • 在iFrame1中,创建一个在body标签onload中调用的JavaScript函数。我检查了我设置的服务器端变量,因此除非我在iframe1中执行了特定操作,否则它不会尝试在iframe2中运行JavaScript函数。您可以将其设置为通过按下按钮触发的功能,或者将其设置为在iframe1中。
  • 然后在iframe2中,您将在下面列出第二个功能。iframe1中的函数基本上转到父页面,然后使用window.frames语法在iframe2中触发JavaScript函数。只要确保使用id/ name而不是iframe2 src
//function in iframe1
function refreshIframe2()
{
    if (<cfoutput>#didValidation#</cfoutput> == 1)
    {   
         parent.window.frames.iframe2.refreshPage();
    }
}

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

1

//刷新页面上的所有iframe

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

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

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

跨浏览器的解决方案是:

    ifrX.src = ifrX.contentWindow.location

这特别有用,特别是当<iframe>是<form>的目标时


为什么用jQuery?!当简单的js可用时
bortunac 2012年

0

解决了!我注册股票溢价只是为了向您分享唯一有效的解决方案(至少在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;
}

希望这可以帮助。


此答案有多个错误:1.不是ASP.NET组件,因此runat="server"不适用;2.为什么所有的上限都是IFRAME?3.维度属性值没有单位;4. frameborder已弃用
Raptor's

0

您需要使用

[0] .src

要查找iframe的来源,其URL必须位于父级的同一个域中。

setInterval(refreshMe, 5000);
function refreshMe() {
    $("#currentElement")[0].src = $("#currentElement")[0].src;   
}

0

你可以这样

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

-5

下面的解决方案将肯定会起作用:

window.parent.location.href = window.parent.location.href;
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.