>

js监听浏览器重回,工作笔记

- 编辑:www.bifa688.com -

js监听浏览器重回,工作笔记

二、使用方法

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

5.window.history.replaceState(),修改当前的 history实体。

  方法二:

1.添加一条 history实体作为替代原来的 history实体

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

参数:state:存储一个对象,可以添加相关信息,可以使用history.state读取其中的内容。 title:历史记录的标题(目前浏览器不支持)。 url:创建的历史记录的链接。进行历史记录操作时会跳转到该链接。

 

取消默认的返回操作:

  

1.window.history.back(),后退

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

每次返回都会消耗一个 history实体,若用户选择取消离开,则需要继续pushState一个实体 ;

 

4.window.history.pushState(state, title, utl),在页面中创建一个history实体。直接添加到历史记录中。

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

function addHandler() { pushHistory(); window.addEventListener("popstate", function(e) { location.href = window.history.state.url; } }); //或者 window.onpopstate=function(e){ location.href = window.history.state.url; }}addHandler();

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

7.window.history.state,会获得history实体中的 state对象。

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

如果把地址换了一个你想去的地址,就形成了一个简单的网页劫持

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

在WebApp或浏览器中,会有点击返回、后退、等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate事件进行监听返回、后退、操作。

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

时间: 2018-07-30阅读: 4450标签: 事件

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

2.window.history.forward(),前进

  

3.window.history.go(num),前进或后退指定数量历史记录

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

2.监听popstate事件

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

6.popstate事件,history实体改变时触发的事件。

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

PS:

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

一、简单介绍 history中的操作

    【代码如下】

function pushHistory() {// 第一个实体 var state = { title: "index", url: "" }; window.history.pushState(state, "index", location.href);// 第二个实体 state = { title: "index", url: "" }; window.history.pushState(state, "index", location.href);// 第三个实体 不要以为最后的空实体没有用 可以解决上来就执行popstate的问题 相当于炮灰 tate = { title: "index", url:"" }; window.history.pushState(state, "index", "");}// history.pushState(state, title, url);// history.replaceState(state, title, url); 替换

  

参数:state:存储一个对象,可以添加相关信息,可以使用history.state读取其中的内容。 title:历史记录的标题(目前浏览器不支持)。 url:创建的历史记录的链接。进行历史记录操作时会跳转到该链接。

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

  方法一:        

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

  window.history.length:

出处:

必发88官网,三、操作历史记录点

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

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

$(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);
  })

 

本文由必发88官网发布,转载请注明来源:js监听浏览器重回,工作笔记