页面跳转后自动调用window.close无效

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

记一次使用window.open与window.close遇到的问题。

交互：点击按钮，新窗口打开第三方页面授权，授权后跳转回result page。如果授权成功，result page倒计时5秒后自动关闭窗口；授权失败，点击“关闭页面”按钮可关闭窗口。

实现：使用window.open(url, name, params)打开第三方页面，第三方页面跳转到result page，result page执行window.close()关闭窗口。

问题：授权成功时，倒计时完成后调用window.close()无法关闭窗口。奇怪的是授权失败时，点击“关闭页面”按钮（同样是调用window.close()）能够关闭窗口。

分析：本地模拟使用window.open(url, name, params)打开result page，倒计时完成后，能够自动关闭窗口。猜测是线上经过第三方页面再跳转到result page后，浏览器认为当前页面不是由自己打开的，所以不生效。猜测需要用户手动触发才能生效。

解决：模拟用户点击行为后自动关闭的window.close()生效

1
2
3
4
5
6
7
const a = document.createElement('a')
document.body.appendChild(a)
a.addEventListener('click', function() {
    window.close()
})
a.click()
document.body.removeChild(a)

其他场景：

  • 如果是打开新标签页：window.open(url, '_blank')