用jQuery重新加载iframe

时间:2010-11-22 20:15:43

标签: javascript jquery html iframe

我在页面上有两个iframe,一个对另一个进行了更改,但另一个iframe在我刷新之前没有显示更改。有没有一种简单的方法来使用jQuery刷新这个iframe?

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

18 个答案:

答案 0 :(得分:224)

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

答案 1 :(得分:164)

如果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,那么您运气不好,

答案 2 :(得分:50)

你也可以使用jquery。这与Alex刚刚使用JQuery提出的相同:

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

答案 3 :(得分: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>

不需要任何网页网址,因为 - &gt; target =“_ SELF”为你做

答案 4 :(得分:8)

使用jquery你可以使用它:

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

答案 5 :(得分:5)

只是回答Alex的答案,但使用jQuery

var currSrc = $("#currentElement").attr("src");
$("#currentElement").attr("src", currSrc);

答案 6 :(得分:3)

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

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

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

答案 7 :(得分:3)

这是另一种方式

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

答案 8 :(得分: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()按钮按预期工作。也很高兴没有计时器。

答案 9 :(得分:2)

$('IFRAME#currentElement').get(0).contentDocument.location.reload()

答案 10 :(得分:2)

回答亚历克斯的回答,但是用jQuery:

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

或者您可以使用小功能:

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

我希望它有所帮助。

答案 11 :(得分:1)

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

  • 在iFrame1中,创建一个在body标签onload中调用的JavaScript函数。我检查了我设置的服务器端变量,因此它不会尝试在iframe2中运行JavaScript函数,除非我在iframe1中执行了特定的操作。您可以将其设置为按下按钮时触发的功能,或者您希望将其设置为iframe1。
  • 然后在iframe2中,你有下面列出的第二个功能。 iframe1中的函数基本上转到父页面,然后使用window.frames语法在iframe2中触发JavaScript函数。只需确保使用iframe2的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();
}

答案 12 :(得分:0)

您可以这样做

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

答案 13 :(得分:0)

//刷新页面上的所有iframe

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

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

答案 14 :(得分:0)

您需要使用

  

[0]的.src

查找iframe的来源及其网址需要与父网址相同。

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

答案 15 :(得分:0)

解决了!我注册到stockoverflow只是为了分享你唯一的解决方案(至少在ASP.NET/IE/FF/Chrome中)有效!我们的想法是用当前的innerHTML值替换div的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;
}

希望这有帮助。

答案 16 :(得分:0)

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

跨浏览器解决方案是:

    ifrX.src = ifrX.contentWindow.location

这在&lt; iframe&gt;时特别有用。是&lt; form&gt;

的目标

答案 17 :(得分:-5)

以下解决方案肯定会有效:

window.parent.location.href = window.parent.location.href;