Question

我需要测试一种情况，即我有一个托管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的值设置为一个函数，甚至提醒（...）该值以确定它确实是我想要的函数，但是当在子iframe上调用postMessage时我没有看到它被调用

Answer 1

postMessage的实施不正确。 onmessage事件必须绑定到框架窗口。由于帧的内容来自不同的来源，因此这只能在帧的一侧进行。由于Same origin policy，您无法从您的网页绑定此活动。

如果同源政策未生效，此代码将有效：

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

html5设置父脚本中iframe的onmessage处理程序

1 个答案: