JavaScript 父子視窗傳遞訊息

父視窗開啟子視窗:
    
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

留言