Question

如您所知，使用html5的API postMessage，我们可以将消息发布到当前页面的iframe或新的弹出窗口，但是如果我们这样编码：

var popwindow = window.open('http://localhost:8080/index2.html');
popwindow.postMessage({"age":10}, 
   'http://localhost:8080/index2.html');

我们不会收到消息，因为我们使用＆＃34; postMessage＆＃34;当弹出窗口尚未加载时，我们如何确保弹出窗口已加载？我们不能在当前页面中使用popwindow.onload，那我们怎么办？请帮助我〜谢谢

Answer 1

你可以使用

window.opener.postMessage(...

index2.html中的

表示开启者已加载

或者，有旧学校的方式：

index.html中的

function imOpen(win) {
    win.postMessage(// whatever ... 
}
window.open('index2.html');

index2.html中的

window.addEventListener('load', function() {
    window.opener.imOpen(window);
});

Answer 2

对于以这种方式使用的弹出窗口，您不需要postMessage API。

//Inside parent window
var data = {age: 10};    //No quotes around age
window.open('http://localhost:8080/index2.html');


//Inside popup window
var sameData = window.opener.data;

不可否认，你可能不应该通过window.open（...）使用弹出窗口，因为它们会一直被阻止。

如果您使用iframe模式，您可以通过执行类似

的操作获得postMessage方式

//In iframe
window.addEventListener("message", iframeReceiveMessage);
document.addEventListener("DOMContentLoaded", function() {
    //JSON data for message
    window.parent.postMessage("iframe is ready", "http://localhost:8080");
});

function iframeReceiveMessage(event) {
    var iframeData = JSON.parse(event.message);
    //iframeData.age === 10
}

然后用以下方式收听父母：

//In parent
window.addEventListener("message", parentReceiveMessage);

function parentReceiveMessage(event)
{
    if (event.origin !== "http://localhost:8080" && event.message !== "iframe is ready") { return; }

    var iframe = document.getElementById("iframeId").contentWindow,
        parentData = {age: 10};
    iframe.postMessage(JSON.stringify(parentData), "http://localhost:8080"); 
}

由于某些浏览器只接受postMessage响应中的字符串，因此您必须将数据转换为JSON。

但是，发送对象数据可能有点过分。如果您已经在同一个域中，您是否考虑过使用sessionStorage？ https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

你仍然需要使用JSON.stringify和JSON.parse（sessionStorage只存储字符串），但它很简单：

//Store it
var data = {age: 10};
sessionStorage.data = JSON.stringify(data);

//Use it
var newData = JSON.parse(sessionStorage.data);

//Remove it
sessionStorage.removeItem("data");

此方法的一个缺点是sessionStorage对于HTTPS页面是独立的，因此您无法在两个协议之间发送sessionStorage数据！

如何确保在使用postMessage API时完全加载弹出窗口？

2 个答案: