需要从子 iframe 中更改父 iframe 的 @src答案

【问题标题】：Need to change @src of a parent iframe from within child iframe需要从子 iframe 中更改父 iframe 的 @src
【发布时间】：2011-09-22 23:09:23
【问题描述】：

我有以下 HTML 标记（不要问....）

- document  //main site
  - <iframe>  //my site
    - <iframe>  //site within my site
      - <frame>
        - <a onclick="JavaScript:parent.parent.location.href='http://bla.com;return false;'">

基本上，主站点在 iframe 中调用我的站点。反过来，我的网站上也有一个 iframe，我称之为第三个网站。第三个站点有一个框架集，其中有一个带有链接的框架。单击此链接时，它必须更改我网站的网址。我的网站和我的子网站在同一个域上。当我将我的网站作为“独立”（不在 iframe 中）运行时，上述代码在所有浏览器中都可以正常工作。

一旦我在主站点的 iframe 中打开我的站点，上面的代码似乎正在尝试更改主站点的源。在 FireFox 中，我收到一条控制台消息“拒绝访问属性”。在 IE 中，它会打开一个新窗口，而我的站点不再位于主站点中。

当我在 iframe 中时，更改我网站上的 @src 属性的正确 JavaScript 是什么？

【问题讨论】：

标签： javascript jquery html asp.net-mvc-3 iframe

【解决方案1】：

你正在用头撞墙，这里是same origin policy。这是 XSS 国家，严格禁止，没有办法绕过它，除非两个域都同意一起交谈。

您可以阅读有关cross domain communication using iframes 的更多信息，但同样，除非不同域同意一起讨论，否则您将不走运。

虽然这看起来令人沮丧，但下次您使用家庭银行服务时，请为这条规则感到高兴；)

【讨论】：

Martin，正如我一直理解的那样，iframe 站点和父站点都需要在同一个域中。对我来说就是这种情况。主站点位于不同的域上，我认为这很好，因为我没有弄乱主站点的 URL。我错了吗？那么这三个必须在同一个域上吗？
如果所有 iframe 都在运行来自同一个 document.domain 的页面，它们应该能够谈论天气，或者它们是否生活在另一个域的页面中，因为它们是嵌套的日志......但是tbh，这是一个灰色区域，浏览器可能会决定，如果所有页面，内部和外部都不是来自同一个域，那么跨框架通信是不可行的。

【解决方案2】：

你可以试试这样的

<document> //main site
  <iframe id="my_iframe"> //your site
     <iframe> //site within your site
       <frame>
         <a onclick="JavaScript:Top.document.getElementById('my_iframe').location.href='http://bla.com;return false;'">

Top 指的是主窗口，然后 getElementById('my_iframe') 会给你你的 iframe 元素。

【讨论】：

有趣的想法。稍后我会试一试。谢谢！
arifshaikh，一旦我尝试并且它有效，我会接受它。我们目前处于“代码冻结”状态，所以我现在无法真正尝试。虽然，不是高优先级，但问题仍然存在。所以，我必须在几天后回到这里。再次感谢您的回答，并为我的延误感到抱歉。
没问题，还有一件事，如果 location.href 不适用于 iframe，请尝试更改其 src 属性。

【解决方案3】：

我相信您正在尝试在不同页面之间进行通信。你可以看看这个 API：HTML5 Cross Document Messaging

基本上，如果你想告诉父 iframe 导航到某个 url，你可以这样做：

在我的站点内的站点 html：

// onclick of your anchor, post message (an event) with an expected origin
window.postMessage("http://bla.com", "www.sitewithinmysite.com");

在 我的网站 html：

// listen to the event "message"
window.addEventListener("message", messageHandler, true);
function messageHandler(e) {
    // only recognize message from this origin
    if (e.origin === "www.sitewithinmysite.com") {
        // then you can navigate your page with the link passed in
        window.location = e.data;
    }
}

【讨论】：

问题在于，我什至无法从 mysite 的子站点调用“mysite”上的任何 JavaScript。它也拒绝许可。
@Dimskiy 你不应该。这就是为什么您需要发布“消息”事件而不是直接在父节点上调用任何 Javascript。请注意，2 块代码示例应该不要写在同一帧中

【解决方案4】：

您可能希望页面使用 AJAX 进行通信。让需要更改其 URL 的站点通过长轮询来侦听 node.js 服务器。

【讨论】：