vue与window.close()填坑记录
场景:在技术选型是vue时,客户想要点击按钮,关闭当前页面。下面是引用MDN中的描述,简单介绍了一下,Window.close()该方法只能由 Window.open() 方法打开的窗口的 window 对象来调用。如果一个窗口不是由脚本打开的,那么,在调用该方法时,JavaScript 控制台会出现类似下面的错误:不能使用脚本关闭一个不是由脚本打开的窗口。 或 Scripts may not c
场景:在技术选型是vue时,客户想要点击按钮,关闭当前页面。
下面是引用MDN中的描述,简单介绍了一下,Window.close()
该方法只能由 Window.open() 方法打开的窗口的 window 对象来调用。如果一个窗口不是由脚本打开的,那么,在调用该方法时,JavaScript 控制台会出现类似下面的错误:不能使用脚本关闭一个不是由脚本打开的窗口。 或 Scripts may not close windows that were not opened by script. 。
同时也要注意,对于由 HTMLIFrameElement.contentWindow 返回的 Window 对象,close() 也没有效果。
因为,我们的问题与此有很大的关系,因为在直接使用Window.close()时,页面是关不掉的,我目前的解决办法是
window.location.href="about:blank";
window.close();
但是由于各方面原因,公司目前是将前端包仍在后台架构中,进行发布的。在这种情况下,如果将要关闭的页面是直接打开,不是在内部使用路由跳转的形式,上面方式没有问题。但是一旦在页面进行二次跳转,上面就会出现about:blank的空白页,而不是直接关闭了。
例如:打开链接,跳转A页面,在A页面点击按钮,跳转B页面,B页面点击关闭按钮,就会出现空白页。
由于技术储备有限,无法能明明白白讲明白为啥这样,但是根据MDN中的描述,也可以理解个大概。然后在这种情况下,我的解决办法如下:
window.setTimeout(()=>{
window.opener=null;
window.open("about:blank", '_top').close();
}, 1);
let tempHref = window.location.href.substr(0,window.location.href.indexOf('#'))+`#/B?ID=1&form=true`;
window.open(tempHref);
1._self —— 默认值,表示在当前上下文中打开,不需要写
2._blank表示我要新创建一个tab/window
3._parent 表示在其上级上下文环境中加载,没有上级时同_self
4._top表示在其顶级上下文环境中加载,没有时同_self
注意:如果不添加setTimeout,在发布环境上,就会出现A页面一旦关闭,就不再会跳转B页面的操作了。但是,在本地编译出来的就能正常新开B窗口。具体原因,不明。还得慢慢学习啊。
更多推荐
所有评论(0)