控制窗口关闭和刷新事件

最新推荐文章于 2023-04-26 17:13:12 发布

YANGZHONGBAO411

最新推荐文章于 2023-04-26 17:13:12 发布

阅读量4k

点赞数 1

分类专栏： js 文章标签： javascript 聊天浏览器 function windows html

本文链接：https://blog.csdn.net/yangzhongbao411/article/details/4752016

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

window.onbeforeunload = function()
{
    var n = window.event.screenX - window.screenLeft;
    var b = n > document.documentElement.scrollWidth-20;

    if (b && window.event.clientY < 0 || window.event.altKey)
    {
        window.event.returnValue = "";
    }
}

解释

其实这段代码主要是用于聊天室窗口的，一般的聊天室窗口是除了标题栏和侧滑栏，其余的XX栏都没有的。用javascript弹出一个这样的窗口的代码是：
<script language="JavaScript">
window.open('欲加载的网页的地址','_blank','width=窗口宽,height=窗口高,menubar=no,toolbar=no,directories=no,location=no,status=no,resizable=no,scrollbars=yes');
</script>
其中值为“no”的就是不要的XX栏。

这段代码中有几个属性值得说明一下：
1.window.onbeforeunload():此方法被触发于：
关闭浏览器窗口
通过地址栏或收藏夹前往其他页面的时候
点击返回，前进，刷新，主页其中一个的时候
点击一个前往其他页面的url连接的时候

如果是用于上面我提到的聊天室窗口，那就只考虑两个事件四个方法：
1、正常关闭：点击关闭按钮（右上角，这个按钮的大小和代码中那个“-20”有关，最后我会说到）；或者按下ALT+F4键（所以代码中有对ALT键的检测）。
2、正常刷新：按下F5键；或者通过右键刷新。

2.
window.event.screenX：鼠标相对于用户屏幕的水平位置
window.screenLeft：窗口左上角相对于屏幕左上角的水平位置
window.event.clientY：鼠标在窗口客户区域（除去所有的XX栏）中的Y坐标（比如在标题栏上时，该值为负值）
window.event.altKey：当alt键按下时，值为 TRUE ，否则为 FALSE 。只读。
document.documentElement.scrollWidth：窗口网页正文全文宽

所以
n = window.event.screenX - window.screenLeft：
求出鼠标在当前窗口上的水平位置（参照：当前窗口左上角为0、0坐标）。

b = n > document.documentElement.scrollWidth-20：
只看水平坐标：鼠标在当前窗口内时，n<m，b为false；鼠标在当前窗口外时，n>m，b为true。20这个值是指关闭按钮的宽度。 m=document.documentElement.scrollWidth-20

window.event.clientY < 0：
只看垂直坐标：鼠标在客户区内时，y>0，x为false；鼠标在客户区外时，y<0，x为true。y=window.event.clientY

综上：
当onbeforeunload时间发生时，有ALT按下，或者鼠标的位置在标题栏的最右上角（鼠标停留在关闭按钮上时）。就能执行if为真的语句了。

window.event.returnValue = ""; 主要是用来当用户关闭了窗口而不是刷新时返回一个值，这个值由你设定。


如果这样说，不太好懂。

我把代码做成了实例，自己刷新或者关闭页面试试就明白了。

两个页面，第一个页面用来弹出第二个页面，第二页面为我们需要了解的代码所在页面。
test1.html
<html>
<body>
<script language="JavaScript">
window.open('test2.html','_blank','width=600,height=600,menubar=no,toolbar=no,directories=no,location=no,status=no,resizable=no,scrollbars=yes');
</script>
</body>
</html>

test2.html
<html>
<body>
<body>
<SCRIPT LANGUAGE="JavaScript">
window.onbeforeunload = function()
{
var n = window.event.screenX - window.screenLeft; //检测鼠标相对于用户屏幕的水平位置 - 网页正文部分左：求出鼠标在当前窗口上的水平位置（参照：当前窗口右上角为0、0坐标）
var m = document.documentElement.scrollWidth-20; //网页正文全文宽
var y = window.event.clientY; //返回鼠标在窗口客户区域（除去所有的XX栏）中的Y坐标
var z = window.event.altKey //当alt键按下时，值为 TRUE ，否则为 FALSE 。只读。

var b = n > m; //只看水平坐标：鼠标在页面内时，n<m，b为false；鼠标在页面外，n>m，b为true。
var x = y < 0; //只看垂直坐标：鼠标在客户区内时，y>0，x为false；鼠标在客户区外时，y<0，x为true。

if(b && x || z) //当onbeforeunload时间发生时，
{
alert("是关闭而非刷新/r/n"+"鼠标在当前窗口上的水平位置："+n+"/r/n网页正文全文宽："+m+"/r/n鼠标在窗口客户区域中的Y坐标："+y+"/r/nALT键是否按下："+z);
window.event.returnValue = ""; //这里可以放置你想做的操作代码
}else{
alert("是刷新而非关闭/r/n"+"鼠标在当前窗口上的水平位置："+n+"/r/n网页正文全文宽："+m+"/r/n鼠标在窗口客户区域中的Y坐标："+y+"/r/nALT键是否按下："+z);
}
}
</script>
<p>
聊天室
</p>
</body>
</html>

注意：：：：：：
这个代码看似不错，但是有一点，它的基础是以用户的浏览器窗口为标准windows窗口而定的。也就是说，用户的浏览器窗口得是win2000那个样子的，因为这个样子下，关闭按钮的大小才会在 20 象素以内。如果用户的窗口不是标准的windows窗口，而是其它的主题等等，这段代码可能就用不了了！
此外有个小BUG，当鼠标停留在最右上角（关闭按钮）时按下F5。代码会执行关闭窗口时的代码，但是窗口却只是刷新而已却不会关闭。

YANGZHONGBAO411

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
控制窗口关闭和刷新事件

window.onbeforeunload = function(){ var n = window.event.screenX - window.screenLeft; var b = n > document.documentElement.scrollWidth-20; if (b && window.event.clientY { window.ev
复制链接

扫一扫