说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

Javascript如何检测浏览器关闭了小叉叉

HTML文档下载 WORD文档下载 PDF文档下载
有时候我们需要在浏览器关闭前做一些工作,这就涉及到了关闭事件的检测。

有时候我们需要在浏览器关闭前做一些工作,这就涉及到了关闭事件的检测。

下面是一个很简单的例子:

 

function CheckBrowser(){     // 检测浏览器关闭 [X] , Alt+F4 , 文件 -> 关闭       if(window.event.clientX < 0 && window.event.clientY <0)    {          window.open("Operation.aspx",                 "Operation",'left=12000,top=1200,width=10,height=1');    }}
上面的代码实现了检测事件动作的位置,并打开一个新的窗口。
从Body Unload中挂接上CheckBrowser函数即可。

 

上面的代码实现了检测事件动作的位置,并打开一个新的窗口。

从Body Unload中挂接上CheckBrowser函数即可。

下面我们看一下如何挂接这个事件的例子:
<html><head><title>检测浏览器退出</title><script type="text/javascript" language="Javascript">function DetectBrowserExit(){   alert('退出前想要执行的任务');}window.onbeforeunload = function(){ DetectBrowserExit(); }</script></head><body>检测浏览器退出</body></html>
如果你使用JQuery,则可以这样做:
$(document).ready(function() {    $(window).bind("beforeunload", function(e) {            if (!e) e = window.event;            returnValue = '您真的要关闭吗?';            e.returnValue = returnValue;            return returnValue;    });});
在下面这些浏览器都可以运行:
Internet Explorer
Mozilla Firefox
Google Chrome
Safari
但在某些浏览器,例如Opera中并不支持onbeforeunload,这个时候如果我需要检测表单中内容更改,在关闭窗口前给一个提示,我们可以使用一个叫FormNavigate的JQuery插件,
插件的源代码如下(jquery.FormNavigate.js):
/** * addon by Egor SpirITzzz Dubrovsky (http://spiritzzz.com/) * jQuery.FormNavigate.js * jQuery Form onChange Navigate Confirmation plugin * Browser Compatibility : IE 6.0, 7.0, 8.0; Firefox 2.0+;  Safari 3+; Opera 9+; Chrome 1+; * * Copyright (c) 2009 Law Ding Yong *  * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * * See the file license.txt for copying permission. */  /**  * Documentation :  * ==================  *  * How to Use:  * $("YourForm").FormNavigate("YourMessage");  *  -- "YourForm" as Your Form ID $("#form") or any method to grab your form  *  -- "YourMessage" as Your onBeforeUnload Prompt Message Here  * Addon:  * $("YourForm").FormNavigate({  *     message: "Message! \n Confirm?",  *     aOutConfirm: "#DivID a.confirm, #DivID2 a"  * });  * aOutConfirm - optional, default - a;  *  * This plugin handles onchange of input type of text, textarea, password, radio, checkbox and file to toggle on and off of window.onbeforeunload event.  * Users are able to configure the custom onBeforeUnload message.  */var global_formNavigate = true;		// Js Global Variable for onChange Flag(function($){    $.fn.FormNavigate = function(options){        window.onbeforeunload = confirmExit;                var defaults = {             message: '',                      aOutConfirm: 'a[target!=_blank][target!=blank]'                 };        var settings = $.extend(false, defaults, options);                 function confirmExit(){              if (global_formNavigate){}            else {                return settings.message;             }        }               if (options.aOutConfirm && options.aOutConfirm != defaults.aOutConfirm){               $(settings.aOutConfirm).each(function(){                $(this+"[target!=_blank][target!=blank]").addClass("aOutConfirmPlugin");                   });            $("a:not([class~='aOutConfirmPlugin'], a[target!=_blank][target!=blank])").click(function(){                    global_formNavigate = true;                   });        }                $(settings.aOutConfirm).click(function(){            if (global_formNavigate == false){                if(confirm(settings.message)){                    global_formNavigate = true;                    return true;                }  else return false;            }        });        $(this).find("input[type=text], input[type='textarea'], input[type='password'], input[type='radio'], input[type='checkbox'], input[type='file']").live('change keypress', function(event){            global_formNavigate = false;        });                $(this+ ":submit").click(function(){            global_formNavigate = true;        });    }})(jQuery);
使用方法举例:
<script type="text/javascript" src="jquery.FormNavigate.js"></script>    <script type="text/javascript">	$(document).ready(function(){        $("form").FormNavigate({            message: "表单已经改变! \n 你真的要关闭本页面吗?",            aOutConfirm: "a.confirm"        });    });    </script><form method="get" enctype="text/plain">    <input value="Input test"/><br /><br />    <textarea>Textarea test</textarea><br /><br />    <input type="submit" value="Send"/></form>

 

 

 

备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘