苍穹
管理员
管理员
  • UID2
  • 粉丝0
  • 关注0
  • 发帖数202
阅读:9661回复:2

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

楼主#
更多 发布于:2018-09-04 17:21
原理:用新页面的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);
 })
苍穹
管理员
管理员
  • UID2
  • 粉丝0
  • 关注0
  • 发帖数202
沙发#
发布于:2018-09-04 17:22
其中涉及到的方法详细介绍:
一、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,”",”[url]http://www.qingdou.me/post-1.html
苍穹
管理员
管理员
  • UID2
  • 粉丝0
  • 关注0
  • 发帖数202
板凳#
发布于:2018-09-04 17:22
游客


返回顶部