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