javascript - 带参数的 Window.Parent.Postmessage

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'}