postMessage函數是用來在兩個窗口之間進行通信的方法,可以在不同窗口之間傳遞消息。它有幾種使用方式:
發送消息的窗口:
window.postMessage('Hello', 'https://example.com');
接收消息的窗口:
window.addEventListener('message', function(event) {
if (event.origin === 'https://example.com') {
console.log(event.data); // 輸出: Hello
}
});
窗口1:
var channel = new MessageChannel();
var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('Hello', '*', [channel.port1]);
channel.port2.addEventListener('message', function(event) {
console.log(event.data); // 輸出: World
});
channel.port2.start();
窗口2(iframe的src為同域的頁面):
window.addEventListener('message', function(event) {
if (event.source === iframe.contentWindow) {
event.ports[0].postMessage('World');
}
});
窗口1(主窗口和iframe中的腳本不同源):
window.addEventListener('message', function(event) {
if (event.origin === 'https://example.com') {
console.log(event.data); // 輸出: Hello
}
});
var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('Hello', 'https://example.com');
窗口2(iframe中的腳本):
window.parent.postMessage('Hello', '*');
這些是postMessage的幾種常見使用方式,可以根據具體需求選擇合適的方式進行通信。