Question

我在我的网页上使用IFrame并与跨域IFrame进行通信 - 使用java脚本中的.postmessage进行跨浏览器解决方案

在我的IFRAME目标页面中，我有类似的内容：

window.parent.postMessage("Assign to value1", "www.parentpage.com");
window.parent.postMessage("Assign to value2", "www.parentpage.com");

然后在我的父页面中：

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent, function (e) {
var value1 = e.data;
var value2 = e.data;

}, false);

我测试了它，它仅使用value1处理单个var。

现在我想将我的.postmessage参数化，如果可能的话，我可以动态地获取消息。我期待的结果是：

value1=Assign to value1
value2=Assign to value2

关于如何实现这一结果的任何建议？

Answer 1

跨域脚本：

window.parent.postMessage(
    {
        event_id: 'my_cors_message',
        data: {
            v1: 'value1', 
            v2: 'value2'
        }
    }, 
    "*" //or "www.parentpage.com"
);

客户/父脚本：

window.addEventListener('cors_event', function(event) {
    if(event.data.event_id === 'my_cors_message'){
        console.log(event.data.data);
    }
});

输出：

{v1: 'value1', v2: 'value2'}

Answer 2

只需将对象作为data：

传递

window.parent.postMessage({v1: 'Assign to value1', v2: 'Assign to value2'}, "www.parentpage.com");

然后，在接收函数体中：

var value1 = e.data.v1
var value2 = e.data.v2

带参数的Window.Parent.Postmessage

2 个答案: