博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
工作笔记——禁用浏览器的返回按钮
阅读量:4559 次
发布时间:2019-06-08

本文共 1679 字,大约阅读时间需要 5 分钟。

出处:http://www.cnblogs.com/webzwf/p/5714385.html

防止页面后退(使浏览器后退按钮失效)

 

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

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

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

    【代码如下】

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

  方法一:

       

  

 

  方法二:

  

$(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对象。

转载于:https://www.cnblogs.com/MonaSong/p/6438786.html

你可能感兴趣的文章
jvm 学习 二
查看>>
Date的格式转换
查看>>
RAC中SID,instance_number,thread#,undotbs之间的关系
查看>>
python的常用库及文档使用
查看>>
iOS进阶_动画的多种实现方式
查看>>
【转】Python入门:Anaconda和Pycharm的安装和配置
查看>>
ArcGIS 中要素的查询与修改
查看>>
POJ1734【Floyd求最小环板子】
查看>>
linux环境下apache2与tomcat6的负载配置
查看>>
powerdesigner相关概念理解
查看>>
求DNA序列中各个碱基的含量
查看>>
计算机网络课堂笔记3.15
查看>>
Learning Cpp----Comliling your first program
查看>>
Microsoft.Net框架程序设计学习笔记(5):延迟签名
查看>>
html5特性
查看>>
关于我在安装2.6.9版本bochs虚拟机时遇到的问题以及解决过程
查看>>
Linux系统克隆为iso镜像盘(类似win gost)
查看>>
2017 乌鲁木齐赛区网络赛 J Our Journey of Dalian Ends 费用流
查看>>
Android 修改Activity标题样式 actionBar
查看>>
OpenCV播放视频
查看>>