0
点赞
收藏
分享

微信扫一扫

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



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



文章目录

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


前言

近日,在工作中遇到这么一个需求。客户希望在页面上实现一个功能:点击按钮,保存并关闭当前页签。本着甲方就是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 实现关闭浏览器页签_页签



举报

相关推荐

0 条评论