探索浏览器页面关闭window.close()的使用详解


Posted in Javascript onAugust 21, 2020

说起来window.close(),这也是个“不太让人省心”的角色。因为浏览器兼容性千差万别,还对他有诸多限制。

使用语法:

window.close()

场景复现

昨天发现有人在csdn上传违禁文件,举报后来到了这个页面:

探索浏览器页面关闭window.close()的使用详解

里面那个按钮发现点击无效!
就。。。当时就挺尴尬的。

不过既然它说是【关闭】,当时就想到了这个堪称“漏洞百出”的close事件,F12打开控制台一看:果不其然

探索浏览器页面关闭window.close()的使用详解

看到这顿时就来了兴趣

探索过程和解决方案

为什么就突然来了兴趣呢?

首先,从这行代码中可以看出:这个页面不是通过 window.open() “打开”的 —— MDN文档中有说明:不是通过window.open()方法打开的窗口不能(直接)使用close进行关闭 (以前这条是针对Firefox的策略)

显然,csdn这位工程师也看过文档,所以想用【在本页面打开空白页,然后再强行关闭】的“取巧”方法。但我不知道当时是怎么测试的,还是说后来浏览器又加的限制,这行代码在本文所写时显然在所有浏览器上都不能执行!

现在让我通过语法解释一下上面的代码:

//摘自:MDN
var window = window.open(url,windowName,[windowFeatures]);

方法明确指出三个参数,第三个参数一般用于在“弹出框页面”处理长宽限制,和我们当前的问题没有关系,我们就不再考虑。

MDN对url参数进行了说明,这个参数可以是个路径,可以是个页面/图片/其他浏览器支持类型的资源的地址, 如果参数1你写空串,会在指定的上下文环境中创建一个空页面

我们看第二个参数windowName, 这个参数表示 你要指定资源在哪个窗口打开 ,如果你指定的窗口不存在,浏览器会创建一个新的窗口,并把这个窗口的window对象命名为windowName(可以通过window.name获取到),值得注意的是,这并不是这个窗口的【title】,当你在别处使用<a><form>标签时 可以将target属性的值写成 windowName 进行跳转,访问,为空时,一样创建新窗口。

通过此处的描述我们可以知道, windowName的值应该与target的值是相同的。

既然说到了target,正好上面csdn用的也是a标签,那我们就以a链接为例 (另一方面form不常用),为<a></a>添加 target 表示我要设置链接的打开方式

1._self —— 默认值,表示在当前上下文中打开,不需要写
2._blank表示我要新创建一个tab/window
3._parent 表示在其上级上下文环境中加载,没有上级时同_self
4._top表示在其顶级上下文环境中加载,没有时同_self

所以现在常用的写法就是:

  • 首先调用 window.open('', ‘_self') 方法 ,参数1置空 参数2写为_self 表示我们要在当前页面加载一个空;
  • 此时仿佛就是一个偷梁换柱的作用,通过加载进来一个空,将我们当前访问的页面变成window.open()打开的页面

这个时候 是不是就可以愉快地使用window.close()方法并成功关闭当前页面了?

可以!

笔者可以确切的告诉你,这种方法在本地测试绝大多数浏览器上都可以正常使用!
但偏偏在这里(本文开头所说实例)不行!

还有一点是:如果你在a标签的 href 中用了javascript:xxx;写事件,那就千万记得不能再加属性target!

就在我焦头烂额自我怀疑时,一师兄给我说了一个取巧的解决方案:about:blank

探索浏览器页面关闭window.close()的使用详解

也可以!但似乎这并不是最好的方法!!!

再回到上面的代码,我想了许久,莫不是 浏览器兼容性 的问题?
为此,我判断了IE、Firefox、和其余浏览器(因为据说Firefox仍然在这个问题上表现地尤为激烈):

// 兼容所有浏览器关闭页面方法
function ClosePage(){  
  if (navigator.userAgent.indexOf("MSIE") > 0){
    if (navigator.userAgent.indexOf("MSIE 6.0") > 0){
      window.opener = null;
      window.close();
    } else {
      window.open('', '_top');
      window.top.close();
    }
  } else if (navigator.userAgent.indexOf("Firefox") > 0) {
    window.location.href = 'about:blank';
  } else {
    window.opener = null;
    window.open('', '_self', '');
    window.close();
  }
}

用这个方法,在各个浏览器上找网页试了一下,效果还不错。
但…
很多浏览器上会有和上面about:blank一样的效果。

到这里我就纳闷了,到底是为什么?
可能是浏览器对close的实现策略导致的。不过还没等我纳闷完,另一个消息就来了:这段代码放到文首的那个页面依然不行。。。(更新:在google和Firefox的一些网站如三水点靠木也不能用!)

有点小懵,什么鬼?
csdn这里究竟用了什么导致“close事件不能执行”?

一些小建议和结尾

这一点我不得而知。我后来分析了整个页面,做了代码复现,断点调试。。。依然没能发现问题出在哪里。

不过我从一开始就觉得:这种方式——不论是“关闭页面”还是“打开一个空页面提示”,它的效果似乎都还不如“返回浏览器首页”好:

let historyLen = window.history.length;
window.history.go(-historyLen+1)

更新:
这里其实是有问题的,因为用户如果“主动”触发浏览器上面的“返回上一页”的按钮,那么window.history的length值并不会改变,当你再执行window.history.go()的时候就不会有响应了!(但是在本文场景下如果用户返回了上一页就不会有这个按钮了,此问题也就不存在)
笔者还想到了document.referrer,它是用于获取+改变“从哪里跳转过来的”路径的API,但是很不幸,我发现了一个很神奇的事情:document.referrer=""时,相当于“本页面” —— 也就是说,它会把上一个页面也变为当前页面!
这确实是很神奇的:因为go函数也实现了这个功能——相当于刷新当前页。

或者“返回网站首页”?

location.href="xxx" rel="external nofollow"

这样还能再宣传一波,何乐而不为?

到此这篇关于探索浏览器页面关闭window.close()的使用详解的文章就介绍到这了,更多相关浏览器页面关闭window.close()内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 #Javascript
vue组件开发之slider组件使用详解
Aug 21 #Javascript
Vue左滑组件slider使用详解
Aug 21 #Javascript
vue实现移动端触屏拖拽功能
Aug 21 #Javascript
vue实现移动端拖动排序
Aug 21 #Javascript
微信小程序实现聊天室
Aug 21 #Javascript
vue实现折线图 可按时间查询
Aug 21 #Javascript
You might like
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
javascript 正则表达式相关应介绍
2012/11/27 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
vue拖拽组件使用方法详解
2018/12/01 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
探究python中open函数的使用
2016/03/01 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
NumPy统计函数的实现方法
2020/01/21 Python
python 实现简易的记事本
2020/11/30 Python
使用python实现学生信息管理系统
2021/02/25 Python
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
试述DBMS的主要功能
2016/11/13 面试题
企业承诺书格式
2014/05/21 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
道歉的话语大全
2015/05/12 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
JavaScript 原型与原型链详情
2021/11/02 Javascript
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript