zoukankan      html  css  js  c++  java
  • Jquery 监听浏览器前进后退

    jQuery(document).ready(function () {
                      if (window.history && window.history.pushState) {
                          $(window).on('popstate', function () {
                    /// 当点击浏览器的 后退和前进按钮 时才会被触发, window.history.pushState('forward', null, ''); window.history.forward(1);//当前页 , }); }
              //在ie中必须有这两行 window.history.pushState('forward', null, ''); window.history.forward(1); });

     这段代码主要使用js的window.history  对象;介绍一下history的几个比较重要的方法:

    1、window.history.forward();   //加载下一个页面(浏览过的) ,和浏览器上的 前进按钮 效果相同

    2、window.history.back();    //回到上一个页面 , 和浏览器上的 后退按钮效果相同

    ps: 如果浏览的网页有缓存, 当点击浏览器上的 前进和后退 按钮时, 是优先加载浏览器的缓存数据,(重要一点是:不走服务器端代码,如果在服务器端代码加断点,是不过断点的, 这也是缓存的一个弊端,有时候容易导致表单中的数据错乱掉,不能及时更新,)

    3、history.go(0);    //刷新当前页面 和浏览器上的 刷新 按钮效果相同

    history.go(-1): 效果和history.back() 效果相同

    history.go(1) : 效果和history.forward() 效果相同

    PS:  js history对象示例代码

     

    4、window.history.pushState(状态码, 标题 , url)   /// 添加并激活一个历史记录条目, 向history 添加当前页面的历史记录,并修改当前页面的url。

    举个例子:

    假如当前页面的url是:http://localhost:28713/SBNext/index.aspx

    执行:window.history.pushState('forward', null, 'badu.aspx');    

    结果: 在浏览器历史记录中添加一条记录http://localhost:28713/SBNext/index.aspx。当前页面的url变成http://localhost:28713/SBNext/badu.aspx ,但是不会刷新页面,也不会检查url是否正确。  这时如果点击 浏览器的back按钮会回退到http://localhost:28713/SBNext/index.aspx页面, 还是当前页面。 所以这就是上面禁用back按钮 的原理。

     

    5、History.replaceStatet();   参数和pushState()函数一样, 作用替换当前的url。

    6、每当激活的历史记录发生变化时,都会触发popstate事件 , 点击浏览器的back 和 next 按钮会触发popstate事件 , 点击刷新按钮不会。

    所以可以使用 popstate 事件监听 back 和next 按钮是否被点击。

     

     

    转自 : https://www.cnblogs.com/generalLi/p/5887259.html

     

    补充: 

     当点击浏览器后退时 发出警告: 

    jQuery(document).ready(function ($) {
        if (window.history && window.history.pushState) {
            $(window).on('popstate', function () {
                var hashLocation = location.hash;
                var hashSplit = hashLocation.split("#!/");
                var hashName = hashSplit[1];
                if (hashName !== '') {
                    var hash = window.location.hash;
                    if (hash === '') {
                        alert("Back button isn't supported. You are leaving this application on next clicking the back button");
                    }
                }
            });
            window.history.pushState('forward', null, './#forward');
        }    
    });

    参考:https://stackoverflow.com/questions/6359327/detect-back-button-click-in-browser

     

  • 相关阅读:
    poj 1743 Musical Theme 后缀数组
    poj 1743 Musical Theme 后缀数组
    cf 432D Prefixes and Suffixes kmp
    cf 432D Prefixes and Suffixes kmp
    hdu Data Structure? 线段树
    关于position和anchorPoint之间的关系
    ios POST 信息
    CALayers的代码示例
    CALayers详解
    ios中得sqlite使用基础
  • 原文地址:https://www.cnblogs.com/liuq1991/p/8479924.html
Copyright © 2011-2022 走看看