使用 jQuery 重新加载 iframe

Posted 2023-02-16

【中文标题】使用 jQuery 重新加载 iframe

【英文标题】：Reload an iframe with jQuery

【发布时间】：2011-05-14 02:00:34

【问题描述】：

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

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

【问题讨论】：

iframe 文档是否在不同的域中？

您是否有权访问显示在 iFrame 中的网站代码？

显示更多代码——两个 iFrame 的 html 以及用于进行更改的 javascript 代码。仅看到到目前为止所包含的内容，很难弄清楚问题所在。

我可以访问代码，是的，并且 iframe 位于不同的域中

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

【参考方案1】：

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

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

但由于 iframe 位于不同的域中，same-origin policy 将拒绝您访问 iframe 的 contentDocument 属性。

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

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

如果您尝试从另一个 iframe 重新加载 iframe，那么您很不走运，不可能。

【讨论】：

他的问题是如何使用 jQuery 而非 Javascript 来实现这一点。有关正确的 jQuery 答案，请参阅下面 Sime Vidas 的帖子。

该脚本在我的 IE9 中不工作（不检查其他版本）。将 contentDocument 更改为 contentWindow 使其可以在 IE9 上运行。 document.getElementById(FrameID).contentWindow.location.reload(true);

这对我不起作用，但是我做了类似iframe.contentDocument.location=iframe.src; 之类的操作，效果很好

这个 Jquery 对我来说就像一个魅力：$('#map_iframe').attr('src', $('#map_iframe').attr('src'));

【参考方案2】：

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

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

【讨论】：

这个解决方案的优点是可读性。虽然没有 Vidas 的回答那么有效，但很明显正在发生什么。

我同意，我也更喜欢这个解决方案的可读性

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

【参考方案3】：

只是回应亚历克斯的回答，但使用 jQuery

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

【参考方案4】：

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

【讨论】：

+1 表示只有一个 ID 引用，不太可能更改一个但忘记另一个

@NicolaeSurdu 另外，这个：(function (elem) elem.src = elem.src; ($('#iframe')[0]));

从另一个 iframe 中重新加载一个 iframe 更改为： $('#iframe', window.parent.document).attr('src', function (i, val ) return val; );

在 Internet Explorer 上，document.getElementById(FrameID).contentWindow.location.reload(true); 等 JavaScript 解决方案无法正常工作。这个答案效果更好。

【参考方案5】：

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

在 iFrame1 中，创建一个 JavaScript 函数，该函数在 body 标记 onload 中调用。我让它检查我设置的服务器端变量，因此它不会尝试在 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();

【参考方案6】：

使用 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>

不需要任何页面 url 因为 -> target="_SELF" 为你做它

【参考方案7】：

如果你是跨域的，简单地将 src 设置回相同的 url 不会总是触发重新加载，即使位置哈希发生变化。

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

类似 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() 按钮按预期工作。没有计时器也不错。

【参考方案8】：

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

跨浏览器解决方案是：

    ifrX.src = ifrX.contentWindow.location

这很有用，尤其是当

的目标时

【讨论】：

为什么是 jQuery ？！当简单的 js 可用时

【参考方案9】：

使用 jquery 你可以使用这个：

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

【讨论】：

这个解决方案如果你想刷新当前的 iframe，我们在哪里。非常感谢！

【参考方案10】：

以下解决方案肯定会起作用：

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

【参考方案11】：

已解决！我注册 stockoverflow 只是为了与您分享唯一可行的解​​决方案（至少在 ASP.NET/IE/FF/Chrome 中）！这个想法是用当前的 innerHTML 值替换 div 的 innerHTML 值。

这里是 HTML sn-p:

<div class="content-2" id="divGranite">
<h2>Granite Purchase</h2>
<IFRAME  runat="server" id="frameGranite" src="Jobs-granite.aspx"   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 已弃用

【参考方案12】：

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

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

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

【参考方案13】：

只是回应 Alex 的回答，但使用 jQuery：

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

或者你可以使用小函数：

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

希望对你有帮助。

【参考方案14】：

这是另一种方式

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

【讨论】：

$( '#iframe' ).attr('src', $( '#iframe' ).attr('src'));

【参考方案15】：

你需要使用

[0].src

要查找 iframe 的来源，其 URL 需要位于父级的同一域中。

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

【参考方案16】：

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

【参考方案17】：

//刷新页面上的所有iframe

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

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

【参考方案18】：

你可以这样做

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