0

我需要测试一种情况，即我有一个父窗口托管一个空的 iframe。我需要使用 iframe 作为父资源和跨域资源之间的代理。我创建了一个简单的jsfiddle，它应该尝试将消息从父级发布到子 iframe。

我尝试在父母的 javascript 中做的是为子 iframe 提供一个处理程序，但对于我的生活，我无法弄清楚让它正常工作的语法。我尝试使用 addEvent 助手从我在 Modern Javascript Develop and Design 中看到的示例中正确添加事件（对于 IE 和其他所有人）：

addEvent: function(obj, type, fn) {
    if (obj && obj.addEventListener) {
        obj.addEventListener(type, fn, false);
    } else if (obj && obj.attachEvent) {
        obj.attachEvent('on' + type, fn);
    }
}

我目前尝试为 onmessage 设置处理程序的方式如下：

document.getElementById("frame1").onmessage = function(e) {
    alert(e.data);
};

我还认为也许我需要访问元素的 contentWindow，但 onmessage 似乎不存在。

是否有访问 iframe 的属性或方法，使其看起来像一个窗口并且会有一个可以处理的 onmessage？

更新

我可以看到 onmessage 的值设置为一个函数，甚至可以通过 alert(...) 来查看它确实是我想要的函数，但是当在子 iframe 上调用 postMessage 时，我没有看到它被调用。

4

1 回答 1

1

您的实施postMessage不正确。该onmessage事件必须绑定到框架的 window。由于框架的内容来自不同的来源，因此只能在框架一侧完成。由于同源策略，您无法从您的页面绑定此事件。

此代码将起作用，前提是同源策略不受影响：

// Bind event to the frame's  window  object
var frame1_window = document.getElementById("frame1").contentWindow;
frame1_window.onmessage = function(e) {
    alert(e.data);
};
frame1_window.postMessage("Hello from same domain", "http://yourdomainhere.com");

示例（域：jsfiddle.net）：http: //jsfiddle.net/zTctZ/3/show/
示例（域：fiddle.jshell.net）：http: //jsfiddle.net/zTctZ/4/

于 2012-04-26T17:58:54.873 回答