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

最新推荐文章于 2024-06-22 16:19:59 发布

心猿码意

最新推荐文章于 2024-06-22 16:19:59 发布

阅读量7.2k

点赞数 3

分类专栏：工作需求解决方案文章标签： JavaScript 关闭页签代码 html

本文链接：https://blog.csdn.net/CDWLX/article/details/119358091

版权

工作需求解决方案专栏收录该内容

48 篇文章 1 订阅

订阅专栏

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

附录

心猿码意

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
多种方式带你玩转 javascript 实现关闭浏览器页签

你知道的越多，你不知道的越多点赞再看，养成习惯如果您有疑问或者见解，或者没有积分想获取项目，欢迎指教：企鹅：869192208文章目录前言方法一方法二方法三方法四方法五方法六附录前言近日，在工作中遇到这么一个需求。客户希望在页面上实现一个功能：点击按钮，保存并关闭当前页签。本着甲方就是BB的心态，简单记录几种 javascript 的实现方式。方法一描述：window.close()实现代码：<!DOCTYPE html><html lang="en"&gt.
复制链接

扫一扫

专栏目录