js实现当前页面关闭功能

页面实现

<div>
    <input type="button" value="关闭当前页" class="close" onclick="closeWin()">
</div>

js的关闭方法

function closeWin(){
   
   
    //有关闭确认
    //if(confirm("您确定要关闭本页吗？")){
   
   
        window.opener=null;
        window.open('','_self');
        window.close();
    //}
}

关闭按钮的样式

.close{
   
   
    background-color: #f44336;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    position:fixed;
    top:10px;
    right:5px;
}

//鼠标悬停时出现的阴影
.close:hover {
   
   
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

最终实现效果：

在触摸屏并全屏显示的情况下，使用这个方式来关闭当前打开的页面是很好的方式。

补充

• 发现这个关闭的方法不是任何时候都有效的，只能在关闭子窗口或者点击链接打开的新窗口才有效。