zoukankan      html  css  js  c++  java
  • 防止页面后退(使浏览器后退按钮失效)

    原理:用新页面的URL替换当前的历史纪录,这样浏览历史记录中就只有一个页面,后退按钮永远失效。

         注:history.go和history.back(包括用户按浏览器历史前进后退按钮)触发,

           页面由于使用pushState修改了history),会触发popstate事件。

        【代码如下】

          注:直接放在不想后退跳转的页面即可!

      方法一:
           <script type="text/javascript">
                jQuery(document).ready(function ($) {
                    if (window.history && window.history.pushState) {
            $(window).on('popstate', function () {
                window.history.forward(1);
            });
          }
        });
      </script>

     

      方法二:

      $(function() {
      if (window.history && window.history.pushState) {
      $(window).on('popstate', function () {
      window.history.pushState('forward', null, '#');
      window.history.forward(1);
      });
      }
      window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
      window.history.forward(1);
      })

     

    其中涉及到的方法详细介绍:

    一、window.history:表示window对象的历史记录

    二、 历史记录的前进和后退


       window. history.forward() --- 此方法加载历史列表中的下一个 URL,同浏览器中点击向前按钮;
       window. history.back() --- 此方法加载历史列表中的前一个 URL,同浏览器中点击后退按钮。
      

      可移动到指定历史记录点:
        通过指定一个相对于当前页面位置的数值,你可以使用 go() 方法从当前会话的历史记录中加载页面
        (当前页面位置索引值为0,上一页就是-1,下一页为1)
        如:要后退一页(相当于调用back()):
                window.history.go(-1);
              向前移动一页(相当于调用forward()):
                window.history.go(1);

      window.history.length

      可以查看length属性值,可知道历史记录栈中共有多少个记录点。
          


    三、操作历史记录点


        HTML5的新API扩展了window.history,可实现存储、替换当前历史记录点,以及监听历史记录点。
        

      1、存储、替换当前历史记录点
            创建当前历史记录点pushState(state, title, url):创建(添加)一个新的history实体,
                        state:状态对象,记录历史记录点的额外对象(要跳转的URL),可以为空;
                        title:页面标题,目前所有浏览器都不支持;
                        url:可选的url,浏览器不会检查url是否存在,只改变url,url必须同域。
                        window.history.pushState(json,”",”http://www.qingdou.me/post-1.html”);
            替换当前历史记录点replaceState():修改当前的history实体,不会新增。
                        类似replace(url),要更新当前历史记录的状态对象或URL时,使用replaceState()方法会更合适。
        

      2 、监听历史记录点onpopstate()

         当history实体被改变时,popstate事件将会发生; onhashchange()可监听URL的hash部分。
        
         3、读取现有state

            当页面加载时,它可能会有一个非空的state对象。当页面重新加载,页面将收到onload事件,但不会有popstate事件。
            然而,如果你读取history.state属性,将在popstate事件发生后得到这个state对象。

  • 相关阅读:
    浏览器市场份额
    GDB gdb 调试
    tcp基础
    TCP加速方式
    windows10 CTCP
    大延时情况tcp和udp测试
    XAMPP与ISS在80端口冲突问题
    space transport protocols
    win10电脑搭建网站
    如何让nginx显示文件夹目录
  • 原文地址:https://www.cnblogs.com/-mrl/p/6753332.html
Copyright © 2011-2022 走看看