javascript 从单独的 iframe 重新加载 iframe

Reloading iframe from separate iframe

提问by Spencer May

I have checked all the reload iframe from another iframe posts on stackoverflow...and I have tried all their solutions but it doesn't seem to help me! So my problem is that I have two iframes on the same page. The iframe's sources are php files that interact with each other, however I need the iframes to reload that way the changes are shown. I have tried many different ways (which I will list below). These iframes are from the same domain. Maybe it is something else that is messing this up? Thanks in advance.

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

Different statements called from inside one iframe:

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

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

Trying to call a parent function that works in the parent window:

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

Inside iframe -

内 iframe -

parent.refresh(id);

Parent window working function -

父窗口工作函数-

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

回答by nothingisnecessary

If you assign nameto iframemost browsers will let you access the iframe's windowobject via the namevalue. This is different from referring to an iframeby its idproperty which will give you a reference to the iframeelement itself (from its owner document), and not the iframe's content window.

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

Simple Example: (from the parent document)

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

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

Let's review your code:

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

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

This works if executed from within the iframe, provided you use the correct id. You may want to use a debugger to verify that parent.document.getElementById(id)returns a reference to the correct element, and check your console to see if any exceptions are being thrown (try hitting F12). Since you didn't post your full code (including markup) there's no way I can to think of to tell what the issue is here.

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

Debugging tips:

调试提示：

• check parent.location.hrefto make sure you are accessing the window you think you are,
• check parent.document.getElementId(id)to make sure that you get an element object (as opposed to nullor undefined),
• check parent.document.getElementById(id).tagNameto make sure you are using the correct ID (tagNameshould === "IFRAME")

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

This line:

这一行：

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

has two problems:

有两个问题：

1. getElementById()is a function of document, but it is being called from parentwhich is a windowobject, and
2. locationis a property of a windowobject. You are trying to access the iframeelement's locationproperty, which does not exist. You need a reference to the iframe's window, not its element.

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

Besides the namemethod, there are other ways to get the iframe's window object:

除了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

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

If changing the srcof the iframeelement is not working for you, these other fixes might:

如果改变src了的iframe元素不为你工作，这些修复可能：

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

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

or

或者

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

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

or

或者

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

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

or

或者

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

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

Caution: If using the namemethod be careful not to use a common value for name, like "home", for example, as it conflicts with a FireFox function called home()and so Firefox will not automatically create a reference to an iframe's window if it is named home. The most reliable method is probably to use window.frames[]as I believe that has been around for a long time (works in FF / Chrome / Safari / IE6+ (at least))

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

A more in-depth (but pretty minimal) example follows, tested in Chrome, FF, and IE:

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

File #1: frametest.html (the parent window)

文件 #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>

File #2: frame1.html (frame 1's src)

文件 #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>

File #3: frame2.html (frame 2's src)

文件 #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>

This example demonstrates how to define and manipulate iframes by idand by name, and how to affect one iframefrom within a different iframe. Depending on browser settings, origin policy may apply, but you already said that your content was all from the same domain so you should be OK there.

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