从单独的 iframe 重新加载 iframe

Posted

技术标签:

【中文标题】从单独的 iframe 重新加载 iframe【英文标题】：Reloading iframe from separate iframe 【发布时间】：2013-11-04 18:12:08 【问题描述】：

我已经检查了 *** 上另一个 iframe 帖子中的所有重新加载 iframe...我已经尝试了他们的所有解决方案，但它似乎对我没有帮助！所以我的问题是我在同一页面上有两个 iframe。 iframe 的源是相互交互的 php 文件，但是我需要 iframe 重新加载以显示更改的方式。我尝试了许多不同的方法（我将在下面列出）。这些 iframe 来自同一个域。也许是其他事情搞砸了？提前致谢。

从一个 iframe 内部调用不同的语句：

parent.document.getElementById(id).src = parent.document.getElementById(id).src;
parent.getElementById(id).location.reload();

尝试调用在父窗口中工作的父函数：

在 iframe 内 -

parent.refresh(id);

父窗口工作函数-

function refresh(id) 
document.getElementById(id).src = document.getElementById(id).src;

【问题讨论】：

两个 iframe 是否与您的 php 脚本从同一个域发送？您不能更改其他域 iframe。 是的。对不起，我忘了包括那个。 如果在第一个 iframe 完成后手动运行 refresh("idString") 会发生什么？ 另外，iframe 有嵌套的可能吗？就像在另一个 iframe 中一样？ refresh(id) 在从父窗口运行时起作用并刷新 iframe，但从子 iframe 运行时则不会。 【参考方案1】：

如果您将name 分配给iframe，大多数浏览器将允许您通过name 值访问iframe 的window 对象。这与通过其id 属性引用iframe 不同，后者将为您提供对iframe 元素本身的引用（来自其所有者document），而不是iframe 的内容window .

简单示例：（来自父文档）

<iframe name='iframe1Name' id='iframe1Id'></iframe>
<script>
    // option 1: get a reference to the iframe element:
    var iframeElem = document.getElementById('iframe1Id');

    // update the element's src:
    iframeElem.src = "page.html";

    // option 2: get a reference to the iframe's window object:
    var iframeWindow = window.iframe1Name;    

    // update the iframe's location:
    iframeWindow.location.href = "page.html";
</script>

让我们检查一下您的代码：

parent.document.getElementById(id).src = parent.document.getElementById(id).src;

如果从iframe 中执行，只要您使用正确的id，这将有效。您可能希望使用调试器来验证 parent.document.getElementById(id) 返回对正确元素的引用，并检查您的控制台以查看是否抛出了任何异常（尝试按 F12）。由于您没有发布完整的代码（包括标记），因此我无法想到这里的问题所在。

调试提示：

检查parent.location.href 以确保您正在访问您认为的窗口， 检查parent.document.getElementId(id) 以确保您获得一个元素对象（而不是null 或undefined）， 检查 parent.document.getElementById(id).tagName 以确保您使用的 ID 正确（tagName 应该 === "IFRAME"）

这一行：

parent.getElementById(id).location.reload();

有两个问题：

    getElementById() 是 document 的一个函数，但它是从 parent 调用的，它是一个 window 对象，并且 location 是 window 对象的属性。您正在尝试访问不存在的 iframe 元素的 location 属性。您需要引用 iframe 的 window，而不是其元素。

除了name方法，还有其他方法可以获取iframe的窗口对象：

    document.getElementById('iframeId').contentWindow; // for supported browsers window.frames["iframeName"]; // assumes name property was set on the iframe window.frames[i]; // where i is the ordinal for the frame

如果更改 iframe 元素的 src 对您不起作用，这些其他修复可能会：

parent.document.getElementById(id).contentWindow.location.reload();

或

parent.frames["yourIframeName"].location.reload(); // requires iframe name attribute

或

parent.frames[0].location.reload(); // frames of immediate parent window

或

top.frames[0].location.reload(); // frames of top-most parent window

注意：如果使用name 方法，请注意不要为name 使用公共值，例如“home”，因为它与名为home() 的FireFox 函数冲突，因此Firefox 不会自动如果 iframe 的窗口名为 home，则创建对它的引用。最可靠的方法可能是使用window.frames[]，因为我相信它已经存在了很长时间（在 FF / Chrome / Safari / IE6+ 中工作（至少））

下面是一个更深入（但非常少）的示例，在 Chrome、FF 和 IE 中进行了测试：

文件#1：frametest.html（父窗口）

<!DOCTYPE html>
<html>
<body>
    <iframe id="frame1Id" name="frame1Name" src="frame1.html"></iframe>
    <iframe id="frame2Id" name="frame2Name" src="frame2.html"></iframe>
</body>
</html>

文件 #2：frame1.html（帧 1 的 src）

<!DOCTYPE html>
<html>
<body>
FRAME 1
<script>
    document.body.style.backgroundColor="#ccc";
    setTimeout(function()document.body.style.backgroundColor="#fff";,100);
    document.write(new Date());
</script>
<input type="button" onclick="parent.document.getElementById('frame2Id').src=parent.document.getElementById('frame2Id').src;" value="Refresh frame 2 by ID"/>
<input type="button" onclick="parent.frame2Name.location.reload();" value="Refresh frame 2 by Name"/>
</body>
</html>

文件 #3：frame2.html（帧 2 的源代码）

<!DOCTYPE html>
<html>
<body>
FRAME 1
<script>
    document.body.style.backgroundColor="#ccc";
    setTimeout(function()document.body.style.backgroundColor="#fff";,100);
    document.write(new Date());
</script>
<input type="button" onclick="parent.document.getElementById('frame1Id').src=parent.document.getElementById('frame1Id').src;" value="Refresh frame 2 by ID"/>
<input type="button" onclick="parent.frame1Name.location.reload();" value="Refresh frame 2 by Name"/>
</body>
</html>

此示例演示如何通过id 和name 定义和操作iframes，以及如何从不同的iframe 中影响iframe。根据浏览器设置，可能会应用原始策略，但您已经说过您的内容都来自同一个域，因此您应该没问题。

【讨论】：

这绝对是一个非常足智多谋的帖子！它帮助我解决了我的问题，我从中学到了很多东西。谢谢你:)

以上是关于从单独的 iframe 重新加载 iframe的主要内容，如果未能解决你的问题，请参考以下文章

从不同的窗口（不是子窗口）重新加载 iframe - javascript

将 iframe URL 更改为另一个协议会重新加载页面，但不会在从计时器触发时重新加载

尝试重新加载嵌入式 iframe 时出现 CORS 错误

每次进入iframe都重新加载

ie上iframe操作时闪烁的问题，重新加载的问题

Flutter Web Iframe html元素错误重新加载