Window.Parent.Postmessage with Parameter

Question

我正在我的页面上使用一个IFrame，并使用java脚本中的.postmessage制作一个与跨域IFrame通信的跨浏览器解决方案

在我的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