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

换句话说,单击按钮后,iframe需要将消息传递给它的父项。

在经历了“不,跨域策略是一个 SCSS ”之后,我发现了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传递到它的父项(我都控制),因此是否可以使用一种可在任何(> IE6)浏览器上使用的方法?

最佳答案

我见过的主要变通方法包括在父窗口上设置哈希值,并在父窗口中检测哈希值,解析哈希值以获得数据并执行所需的任何操作。这是执行此操作的一个示例:http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/。像这样的Google提供了更多选项:http://easyxdm.net/wp/

10-05 20:41
查看更多