多种方式带你玩转 javascript 实现关闭浏览器页签

你知道的越多，你不知道的越多
点赞再看，养成习惯
如果您有疑问或者见解，或者没有积分想获取项目，欢迎指教：
企鹅：869192208

文章目录

前言
方法一
方法二
方法三
方法四
方法五
方法六
附录

前言

近日，在工作中遇到这么一个需求。客户希望在页面上实现一个功能：点击按钮，保存并关闭当前页签。本着甲方就是BB的心态，简单记录几种 javascript 的实现方式。

方法一

描述：

window.close()

实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>Title</title>
</head><body><div id="box"><a class="close" href="javascript:void(0);" onclick="pageClose();">关闭页签</a>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">function pageClose(){window.close();}
</script>
</body>
</html>

方法二

描述：

window.opener=null;
window.open(’’,’_self’);
window.close();

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>Title</title>
</head><body><div id="box"><a class="close" href="javascript:void(0);" onclick="pageClose();">关闭页签</a>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">function pageClose(){window.opener=null;window.open('','_self');window.close(); }
</script>
</body>
</html>

方法三

描述：

window.open(’’,’_self’);
window.close();

实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>Title</title>
</head><body><div id="box"><a class="close" href="javascript:void(0);" onclick="pageClose();">关闭页签</a>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">function pageClose(){window.open('','_self');window.close(); }
</script>
</body>
</html>

方法四

描述：

window.opener=null;
window.close();

实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>Title</title>
</head><body><div id="box"><a class="close" href="javascript:void(0);" onclick="pageClose();">关闭页签</a>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">function pageClose(){window.opener=null;window.close(); }
</script>
</body>
</html>

方法五

描述：

var opened=window.open(‘about:blank’,’_self’);
opened.opener=null;
opened.close();

实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>Title</title>
</head><body><div id="box"><a class="close" href="javascript:void(0);" onclick="pageClose();">关闭页签</a>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">function pageClose(){var opened=window.open('about:blank','_self');opened.opener=null;opened.close(); }
</script>
</body>
</html>

方法六

描述：

var opened=window.open(‘about:blank’,’_self’);
opened.close();

实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>Title</title>
</head><body><div id="box"><a class="close" href="javascript:void(0);" onclick="pageClose();">关闭页签</a>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">function pageClose(){var opened=window.open('about:blank','_self');opened.close(); }
</script>
</body>
</html>

附录

多种方式带你玩转 javascript 实现关闭浏览器页签相关推荐

肝了4.5万字，手把手带你玩转JavaScript（建议收藏）
江哥手把带你玩转 JavaScript 分为 5 期,大概 15 万字,建议点赞,关注,收藏,防止失联. 本期为第一期入门篇,4.5 万字. 什么是JavaScript? JavaScript简称JS ...
康少带你玩转JavaScript
目录 1.JavaScript简述 2.JavaScript引入方式 3.JavaScript语法基础 4.JavaScript数据类型 5.运算符 6.流程控制 7.函数 8.内置对象和方法 1.J ...
两种方式带你玩转 json 格式转 xml 格式
你知道的越多,你不知道的越多点赞再看,养成习惯如果您有疑问或者见解,或者没有积分想获取项目,欢迎指教: 企鹅:869192208 文章目录前言方法一.使用 jdom 进行转换方法二.使用 d ...
安卓玩机搞机技巧综合资源-----不亮屏幕导资料有屏幕锁保数据刷机等多种方式【十五】
接上篇安卓玩机搞机技巧综合资源------如何提取手机分区小米机型代码分享等等 [一] 安卓玩机搞机技巧综合资源------开机英文提示解决dm-verity corruption your de ...
JavaScript实现类似sleep()的多种方式
编写复杂的JavaScript脚本时,有时会有需求希望脚本能停滞指定的一段时间,类似于 java 中的 Thread.sleep 或者 sh 脚本中的 sleep 命令所实现的效果. 很多语言都有sl ...
安卓玩机搞机技巧综合资源----手机显秒设置多种方式【十一】
接上篇安卓玩机搞机技巧综合资源------如何提取手机分区小米机型代码分享等等 [一] 安卓玩机搞机技巧综合资源------开机英文提示解决dm-verity corruption your de ...
javaScript 合并对象的多种方式
javaScript 合并对象的多种方式: 1.方式一:Object.assign(obj1, obj2, -) 参数1:obj1 是目标对象参数2:obj2 是源对象注意:对象与对象之间,同名属 ...
干货丨一文带你玩转机器学习和深度学习
俗话说的好:工欲善其事,必先利其器!一款好的工具可以让你事半功倍,尤其是在大数据时代,更需要强有力的工具通过使数据有意义的方式实现数据可视化,还有数据的可交互性;我们还需要跨学科的团队,而不是单个数据 ...
干货丨手把手带你玩转机器学习和深度学习
俗话说的好:工欲善其事,必先利其器!一款好的工具可以让你事半功倍,尤其是在大数据时代,更需要强有力的工具通过使数据有意义的方式实现数据可视化,还有数据的可交互性;我们还需要跨学科的团队,而不是单个数据 ...

多种方式带你玩转 javascript 实现关闭浏览器页签

文章目录

前言

方法一

方法二

方法三

方法四

方法五

方法六

附录

多种方式带你玩转 javascript 实现关闭浏览器页签相关推荐

最新文章

热门文章