好库网 好库网首页 | 我的好库
好饱的专栏

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

发布者:好饱
发布日期:2011/4/6 22:41:18   更新日期:2011/4/6 22:41:18
阅读次数:6391
评分:4.80
介绍:有时候我们需要在浏览器关闭前做一些工作,这就涉及到了关闭事件的检测。
正文:

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

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

 

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>

 

 

 


评论 [发表评论]
账号 密码 还没帐号呢,现在注册一个?

免责声明:好库网所展示的信息由买卖双方自行提供,其真实性、准确性和合法性由信息发布人负责。好库网不提供任何保证,并不承担任何法律责任。