父視窗開啟子視窗:
子視窗傳送訊息給父視窗:
父視窗接收子視窗訊息:
父視窗傳送訊息給子視窗:
參考資料:
mdn - Window: open() method
mdn - Window: postMessage() method
const url = '/child';
const target = '_blank'; // 以新視窗開啟
const features = 'width=600,height=400';
const newWindow = window.open(url, target, features); // 開啟子視窗
子視窗傳送訊息給父視窗:
if (window.opener) {
// 傳送訊息給父視窗
window.opener.postMessage({message: 'Hello from child window'}, '*');
} else {
console.log('父視窗不存在');
}
父視窗接收子視窗訊息:
window.addEventListener('message', (event) => {
console.log('接收到的訊息:', event.data);
console.log('訊息來源:', event.origin);
});
父視窗傳送訊息給子視窗:
newWindow.postMessage("來自父視窗的訊息", '*');
參考資料:
mdn - Window: open() method
mdn - Window: postMessage() method
留言
張貼留言
如果有任何問題、建議、想說的話或文章題目推薦,都歡迎留言或來信: a@ruyut.com