当前位置:Gxlcms > JavaScript > JS针对浏览器窗口关闭事件的监听方法集锦

JS针对浏览器窗口关闭事件的监听方法集锦

时间:2021-07-01 10:21:17 帮助过:413人阅读

本文实例总结了JS针对浏览器窗口关闭事件的监听方法。分享给大家供大家参考,具体如下:

方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示)

  1. <script type="text/javascript">
  2. window.onbeforeunload=onclose;
  3. function onclose()
  4. {
  5. if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
  6. {
  7. return "您要离开吗?";
  8. }
  9. }
  10. </script>

方式二:适用于IE和FF,不区分刷新和关闭

  1. <script type="text/javascript">
  2. window.onbeforeunload = onbeforeunload_handler;
  3. window.onunload = onunload_handler;
  4. function onbeforeunload_handler(){
  5. var warning="确认退出?";
  6. return warning;
  7. }
  8. function onunload_handler(){
  9. var warning="谢谢光临";
  10. alert(warning);
  11. }
  12. </script>

方式三:适用于IE和FF,不区分刷新和关闭,最简单的

  1. <script type="text/javascript">
  2. window.onbeforeunload=onclose;
  3. function onclose()
  4. {
  5. return "您确定退出吗?";
  6. }
  7. </script>

方式四:适用于IE和FF,不区分刷新和关闭,稍复杂的

  1. <script language="javascript">
  2. var MSG_UNLOAD="如果你此时离开档案系统,所做操作信息将全部丢失,是否离开?";
  3. var UnloadConfirm = {};
  4. //启用监听浏览器刷新、关闭的方法
  5. UnloadConfirm.set = function(confirm_msg){
  6. window.onbeforeunload = function(event){
  7. event = event || window.event;
  8. event.returnValue = confirm_msg;
  9. }
  10. }
  11. //关闭监听浏览器刷新、关闭的方法
  12. UnloadConfirm.clear = function(){
  13. window.onbeforeunload = function(){};
  14. }
  15. UnloadConfirm.set(MSG_UNLOAD);
  16. </script>

方式五:只适用于IE6下的关闭按钮和快捷键关闭的,刷新不提示

  1. <script type="text/javascript">
  2. window.onbeforeunload=onclose;
  3. function onclose()
  4. {
  5. var warnning = '<fmt:message key="systemMessage.exitWarning" />';
  6. var beforeExit='<fmt:message key="systemMessage.beforeExitWarning" />';
  7. if(event.clientY<0 && event.clientX>document.body.clientWidth-20 || event.clientY<0 && event.clientX<20 ||
  8. event.altKey || event.ctrlKey || event.clientY>document.body.clientHeight){
  9. alert(beforeExit);
  10. return warnning;
  11. }
  12. }
  13. </script>

另附判断浏览器类型的JS

  1. <script type="text/javascript">
  2. var Sys = {};
  3. var ua = navigator.userAgent.toLowerCase();
  4. if (window.ActiveXObject)
  5. Sys.ie = ua.match(/msie ([\d.]+)/)[1]
  6. else if (document.getBoxObjectFor)
  7. Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
  8. else if (window.MessageEvent && !document.getBoxObjectFor)
  9. Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
  10. else if (window.opera)
  11. Sys.opera = ua.match(/opera.([\d.]+)/)[1]
  12. else if (window.openDatabase)
  13. Sys.safari = ua.match(/version\/([\d.]+)/)[1];
  14. //以下进行测试
  15. if(Sys.ie) document.write('IE: '+Sys.ie);
  16. if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
  17. if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
  18. if(Sys.opera) document.write('Opera: '+Sys.opera);
  19. if(Sys.safari) document.write('Safari: '+Sys.safari);
  20. </script>

区分浏览器,IE和FF分别处理(奇怪的是,IE下有时候失效)

  1. <script type="text/javascript">
  2. window.onbeforeunload=onclose;
  3. function onclose()
  4. {
  5. var Sys = {};
  6. var warnning = '<fmt:message key="systemMessage.exitWarning" />';
  7. var ua = navigator.userAgent.toLowerCase();
  8. if (window.ActiveXObject)
  9. Sys.ie = ua.match(/msie ([\d.]+)/)[1]
  10. else if (document.getBoxObjectFor)
  11. Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
  12. if(Sys.ie) {//for IE
  13. if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
  14. {
  15. window.event.returnValue = warnning ;
  16. }
  17. }
  18. if(Sys.firefox) //for FF
  19. return warnning;
  20. }
  21. </script>

最简单的判断浏览器类型的方法

  1. <script type="text/javascript">
  2. if(-[1,]){
  3. alert("这不是IE浏览器!");
  4. }else{
  5. alert("这是IE浏览器!");
  6. }
  7. </script>

[1,]在标准浏览器会返回字符串"1",相当于调用[1,].toString,
,IE则返回"1,"。但是这样IE与标准都会通过检测,因此使用负号强制转换为数字,

标准能成功转换为1,1会在if中自动转换为true,而IE则转换为NaN,再自动转换为false!

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

人气教程排行