JS子页面调用父页面的方法

方法1: 子页面关闭后触发父页面的方法

// 父页面
const winObj = window.open(url.href); const loop = setInterval(() => { if (!winObj) { return; } if (winObj.closed) { clearInterval(loop);
     // 父页的自定义方法
this.refreshTable(); } }, 1);

// 子页面
function xxx(){
  window.close();
}
  

方法2.子页面调用父页面的方法

// 父页面
 window.open(url.href);
 window.addEventListener('message', (data: any) => {
    // 这个true是子页面传递过来的是string.可以自定义其他
      if (data.data === 'true') {
     // 父页面的自定义方法
        this.refreshTable();
      }
    }); 

// 子页面
 function xxx(){
  // 给父页面传值 window.opener.postMessage(
'true'); }
// addEventListener 会导致重复触发 可改用 onmessage 方法
// 父页面

window.onmessage = (data: any) => {
      if (data.data === 'true') {
        this.refreshTable();
      }
    };
// 子页面
window.opener.postMessage('true');
 

 

posted @ 2022-04-20 09:55  大脑过载  阅读(2118)  评论(0编辑  收藏  举报