浏览器中beforeunload的使用

最新推荐文章于 2024-07-31 19:21:59 发布

最新推荐文章于 2024-07-31 19:21:59 发布 · 417 阅读

文章标签：

#javascript #ViewUI

本文介绍了一个利用beforeunload事件实现页面加载提示的应用案例。通过绑定该事件并在用户尝试离开当前页面时弹出加载提示框，可以改善用户体验。示例代码使用了jQuery和Layer库。

打开一些慢的网站的时候只见浏览器在不停转圈，但是页面还停留在当前页面的，有些网站的效果是你点击链接要跳到另一个页面的时候，在当前页面弹出一个框提示“正在加载中....”，用到了浏览器的beforeunload事件，自己试了一下，以下代码可运行

 
    源代码
    复制(IE有效)
    打印
    关于 
   
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>    
    <script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>  
        <script src="layer/layer.js"></script>  
    <script language="javascript">  
        $(window).bind('beforeunload',function(){   
                layer.msg('正在拼命加载！！！', {  
                    time: 0 //不自动关闭   
                });    
        });  
    </script>  
</head>  
<body>  
    <a href='http://niunan.net'>跳到百度</a>  
</body>  
</html>  