javascript - 从单独的 iframe 重新加载 iframe

标签 javascript iframe parent reload

我已经检查了 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;
}

最佳答案

如果您分配 nameiframe大多数浏览器都允许您访问 iframewindow对象通过 name值(value)。这与引用 iframe 不同。由其id属性,它将为您提供对 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)确保您获得一个元素对象(与 nullundefined 相对),
  • 查看 parent.document.getElementById(id).tagName确保您使用的是正确的 ID (tagName 应该 === "IFRAME")

  • 此行:
    parent.getElementById(id).location.reload();
    

    有两个问题:
  • getElementById()document 的函数, 但它是从 parent 调用的这是一个 window对象和
  • locationwindow 的属性目的。您正在尝试访问 iframe元素的location属性,不存在。您需要引用 iframewindow ,而不是它的元素。

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

  • 如果更改 srciframe element 不适合您,这些其他修复可能会:
    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 的公共(public)值,例如“home”,因为它与名为 home() 的 FireFox 函数冲突。因此,如果 iframe 的窗口被命名为 home,Firefox 将不会自动创建对它的引用。 .最可靠的方法大概是使用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>
    

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

    关于javascript - 从单独的 iframe 重新加载 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19593004/

    相关文章:

    javascript - 为什么在 JavaScript 原型(prototype)函数中使用全局函数?

    javascript - 在 socket.emit() 中传递参数的问题

    html - 父 div,未设置高度,高度超出几个像素以适应子 img 元素高度?为什么?

    html - Div 父级高度的 100%

    javascript - Javascript 中的简单 Azure 函数可在队列中使用 HTTP 触发器主体

    javascript - Jquery点击函数,同一个按钮显示不同的文字

    javascript - 在页面和 iframe 之间双向使用 MessageChannel() 发送多条消息

    iframe - 使用 Selenium IDE 输入 IFrame

    jquery - 如何获取iframe中的页面标题?

    html - 使div(height)占据父级剩余高度