4

我已经检查了 stackoverflow 上另一个 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;
}
4

1 回答 1

10

如果您分配name给iframe大多数浏览器，您将允许您通过值访问iframe'window对象name。这与iframe通过其id属性引用 an 不同，后者将为您提供对iframe元素本身的引用（来自其所有者document），而不是iframe's content 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)以确保您获得一个元素对象（而不是nullor undefined），
  • 检查parent.document.getElementById(id).tagName以确保您使用的是正确的 ID（tagName应该 === "IFRAME"）

这一行：

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

有两个问题：

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

除了name方法之外，还有其他方法可以获取iframe的 window 对象：

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

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

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”，因为它与调用的 FireFox 函数冲突，home()因此如果 iframe 的窗口命名为 ，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 帧的 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('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>

此示例演示如何定义和操作iframes byid和 by name，以及如何iframe从不同的iframe. 根据浏览器设置，源策略可能适用，但您已经说过您的内容都来自同一个域，因此您应该可以在那里。

于 2013-10-26T06:53:52.707 回答