⛲ 学习 - window.opener

SLYLXDYMJ

字数：302 字

时长：1 分钟

该方法可以实现在页面中点击按钮，跳转到另外一个游览器 tab 页面（简称为新页面），
在新页面处理完成逻辑后，可以向原页面发送通知，常用于 oauth 登录等功能。

window.open

该方法将打开一个新的网页标签
注意：若用户未交互，游览器会阻止该方法的执行（游览器会认为不是用户的操作，认为是广告等）
解决：在用户交互事件中调用 window.open（click 等事件）

document.getElementById('btn').addEventListener(function (e) {
  window.open('https://www.baidu.com');
})

window.opener

当前网页必须由 window.open 打开时才有
window.opener 指向 window.open 时的父 window 对象

window.opener.alert('提示')

实现（跳转网页回调）

父窗口

// 定义回调 cb 事件
window.callback = function (params) {
  console.log(params);
};

// 点击按钮触发网页跳转，打开一个新页面
document.getElementById('btn').addEventListener(function (e) {
  window.open('https://www.baidu.com');
})

子窗口

// 触发父窗口回调方法，并传入参数
window.opener.callback(/* any */);

// 关闭当前子窗口
window.close();

这样保证了页面的执行顺序，也保证了用户体验。