思考|window.close()究竟能关闭哪些页面

1,056 阅读3分钟

昨天该下班的时候突然接了个需求:没用用户权限的时候就3s后退出系统(关闭当前tab页),一想,这简单啊,window.close()就完事了,加上之后都没测试就直接下班了

结果刚到家就收到测试的反馈说没效果?!!

这我懵了啊,没效果???那咋整???我慌了???

瞬间嘴里的饭都不香了

开机随便找了个自己写的Vue的demo开始测试

setTimeout(() => {
  window.close()
}, 3000)

地址栏localhost:3000,回车,等待3秒。咦,真没用啊?!!

直接google,一堆解决方案挨个试呗,

case 1:
window.open('about:blank', '_self').close()

case 2:
window.opener = null
window.open(window.location.href, '_self').close()

case 3:
window.top.close()
...

直到此时,我的认知是:window.close()只能关闭当前页面打开的tab页,不能关闭自身

第二天到公司向需求反馈,实现不了,需求说你再看看

于是准备新的一轮google:

就在准备开始的时候突然脑子里闪了一下,这次不google了,先去看看Vue的issue有没有相关的问题,搜到了一个:

这个老哥写的解决方案,哈哈哈哈,我也试过。

看下面大佬的回答:这是DOM API和Vue无关???

就是说只能关闭通过代码打开的window,那我刚刚的localhost:3000回车,这不是代码打开的,是我(用户)自己开的,好像也没问题,你浏览器不能撤销用户的操作。

那再测试一下,设置在Vue的demo启动的时候顺便打开浏览器访问项目

npm run start启动!!!

1,2,3...关了!!! ohhhhhhh~~~~~~~

好吧,问题找到了,最后的结论页就是MDN上说的:该方法只能由 Window.open() 方法打开的窗口的 window 对象来调用。如果一个窗口不是由脚本打开的,那么,在调用该方法时,JavaScript 控制台会出现类似下面的错误:不能使用脚本关闭一个不是由脚本打开的窗口。Scripts may not close windows that were not opened by script.

同时也要注意,对于由 HTMLIFrameElement.contentWindow 返回的 Window 对象,close() 也没有效果。

记录这个,结论其实没有任何意义,完全就是MDN上写的字面意思,但是如果,第一时间就看MDN的话,我估计也只是以为是:只能关闭window.open()新开的tab页,不能关闭自身,而不会注意到后面那一句‘如果一个窗口不是由脚本打开的,那么,在调用该方法时,JavaScript 控制台会出现类似下面的错误:不能使用脚本关闭一个不是由脚本打开的窗口。Scripts may not close windows that were not opened by script. 。’的真正意义。这其实在很多时候都有体现:

  • 上学时候老师讲的课当时以为听懂了,后来慢慢再细想,发现当时老师讲的意思并不是自己当时以为的那种想法
  • 生活中别人讲的大道理,自己以为都懂,等到自己真的经历了也才知道,原来是这样啊。。。
  • 等等等等

就比如一千个人眼中就有1000个哈姆雷特,我没看过哈姆雷特,但是我知道每个人对事物的理解都是不一样的,每个人的不同阶段对事物的理解也是不一样的

多经历,多总结,加油~~~