Question

我有一个可在第三方网站上使用的嵌入式iframe。它有几种形式可以填写，最后必须告知父页面它已完成。

换句话说， iframe需要在点击按钮时将消息传递给它的父级。

在涉及“不，跨域策略是一个混蛋”之类的海洋中，我找到了window.postMessage，这是HTML5草案规范的一部分。

基本上，您在页面中放置以下JavaScript以捕获来自iframe的消息：

window.addEventListener('message', goToThing, false);

function goToThing(event) {
    //check the origin, to make sure it comes from a trusted source.
    if(event.origin !== 'http://localhost')
        return;

    //the event.data should be the id, a number.
    //if it is, got to the page, using the id.
    if(!isNaN(event.data))
        window.location.href = 'http://localhost/somepage/' + event.data;
}

然后在iframe中，有一些JavaScript向父母发送消息：

$('form').submit(function(){
    parent.postMessage(someId, '*');
});

太棒了吧？唯一的问题是它似乎不适用于任何版本的IE。所以，我的问题是：鉴于我需要将从 iframe传递给它的父母（我控制的两个），是否有一个我可以使用的方法可以使用任何（＆gt; IE6）浏览器？

Answer 1

在IE中你应该使用

attachEvent("onmessage", postMessageListener, false);

而不是

addEventListener("message", postMessageListener, false);

Answer 2

我见过的主要解决方法是在父窗口上设置哈希值并检测父窗口中的哈希值，解析哈希值以获取数据并执行任何操作。以下是执行此操作的一个示例：http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/。谷歌有更多选择，例如：http://easyxdm.net/wp/。

Answer 3

这比这更简单。

您说您可以控制您可以双向设置的父级和内容在javascript中进行通信。

你需要的只是

yourframename.document.getElementById('idofsomethinginttheframe')

然后从框架内部用

地址解决任何问题

parent.document

在所有浏览器中传递来自iFrame的消息

3 个答案: