来自不同域的父级中的Jquery绑定功能答案

【问题标题】：Jquery binding function in parent from different domain来自不同域的父级中的Jquery绑定功能
【发布时间】：2012-12-24 16:05:12
【问题描述】：

我的问题和这个真的很相似：execute javascript function in a another iframe when parent is from different domain

我有一个 A.com 域页面，其中包含 2 个 iframe，其中包含 B.com/page1 和 B.com/page2

我需要通过点击 B.com/page1 中的按钮（与已链接的页面相同）来执行 B.com/page2 iframe 中的功能，但是使用jQuery。

现在我在 B.com/page1 中使用此代码

parent.$(parent.document).trigger("myFunction", [myParams]);

并在 B.com/page2 中使用

parent.$(parent.frames).bind("myFunction", function (e, value) { localFunction(value); });

如果我从 B.com/index 加载 page1 和 page2 效果很好，但从 A.com 加载时会失败并出现错误

不安全的 JavaScript 尝试从框架访问带有 URL A.com 的框架使用 URL B.com/page2。域、协议和端口必须匹配。

错误由绑定函数触发。如链接主题中所述，我可以使用代码从 iframe 引用到同一页面中的其他 iframe：

parent.frames['page2'].myFunction(args);

但我仍然从 javascript 控制台收到同样的错误 AND 另一个错误：

未捕获的类型错误：无法调用未定义的方法“myFunction”

我怎样才能摆脱这种状态？谢谢！

【问题讨论】：

同源策略阻止你做你想做的事。考虑查看window.postMessage 函数，它提供了一种在不同域的页面之间发送消息的方法。浏览器支持比较好（source）。
谢谢你，我正在寻找它！

标签： jquery cross-domain

【解决方案1】：

按照 Henrik 的建议，使用 window.postMessage 函数解决了问题！我首先必须将 B.com/page2 postMessage 发送到 A.com，然后将 A.com postMessage 发送到 B.com/page1 :D 它适用于最新的 chrome、opera、firefox，即 10、ie9、ie8、ie7 没有任何问题:)

B.com/page2 向它发送消息：

parent.postMessage("go!!!!!", $('#parentPage').val());

（我让父页面将其 ip 写入一个名为“parentPage”的隐藏 div）然后父页面使用

获取事件

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent, function (e) {
        //triggered code here
}, false);

然后用这个重新发送消息

win.postMessage(
                "go",
                targetPage);

B.com/page1 接收消息：

window.onmessage = function (e) { /* code here */ }

希望它有用:)

【讨论】：