监听浏览器再次回到,职业笔记

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

HTML5 history新特性pushState、replaceState及两者的区别,html5pushstate

DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退。

从HTML5开始,我们可以开始操作这个历史记录堆栈。

1.History
使用back(),forward(),和go()方法可以在用户的历史记录中前进和后退

前进和后退

后退:

代码如下:
window.history.back();

这个方法会像用户点击了浏览器工具栏上的返回键一样。

同样的,也可以用以下方法产生用户前进行为:

代码如下:
window.history.forward();

移动到历史记录中特定的位置

你可以使用go()方法从session历史中载入特定的页面。

向后移动一页:

代码如下:
window.history.go(-1);

向前移动一页:

代码如下:
window.history.go(1);

类似的,你可以前进或者后退多页。

还可以通过检查浏览器历史记录的length属性来找到历史记录堆栈中的页面总数。

代码如下:
var numberOfEntries = window.history.length;

注意:IE支持向go()方法传URL参数。

2.添加和修改history实体
自Gecko2开始引入 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

HTML5引入了histtory.pushState()和history.replaceState()这两个方法,他们允许添加和修改history实体。同时,这些方法会和window.onpostate事件一起工作。

使用history.pushState()方法来修改referrer,这种方法可以被用在经过修改状态后而为xmlhttpRequest对象创建的http
header中。这个referrer会是创建XMLHttpRequest 时document的URL。

pushState 用于向 history 添加当前页面的记录,而 replaceState 和
pushState 的用法完全一样,唯一的区别就是它用于修改当前页面在 history
中的记录。

例子

假设

代码如下:
var stateObj = { foo: “bar” }; history.pushState(stateObj, “page 2”,
“bar.html”);

这种方法将会使url地址栏显示

现在再次假设用户继续访问

这时,我们再次点击后退,URL将变成

pushState方法
pushState()有三个参数:state对象,标题(现在是被忽略,未作处理),URL(可选)。具体细节:

· state对象
–state对象是一个JavaScript对象,它关系到由pushState()方法创建出来的新的history实体。用以存储关于你所要插入到历史
记录的条目的相关信息。State对象可以是任何Json字符串。因为firefox会使用用户的硬盘来存取state对象,这个对象的最大存储空间为640k。如果大于这个数
值,则pushState()方法会抛出一个异常。如果确实需要更多的空间来存储,请使用本地存储。

·
title—firefox现在回忽略这个参数,虽然它可能将来会被使用上。而现在最安全的使用方式是传一个空字符串,以防止将来的修改。或者可以传一个简短的标题来表示state

·
URL—这个参数用来传递新的history实体的URL,注意浏览器将不会在调用pushState()方法后加载这个URL。但也许会过一会尝试加载这个URL。比如在用户重启了浏览器后,新的url可以不是绝对路径。如果是相对路径,那么它会相对于现有的url。新的url必须和现有的url同域,否则pushState()将抛出异常。这个参数是选填的,如果为空,则会被置为document当前的url。

某种意义上来说,调用pushState()方法很像设置了window.location =
“#foo”,这两者都会创建和激活另一个关联到当前document的history实体,但pushState()另外有一些优点:

新的url可以是任何和当前url同域的url,相比之下,如果只设置hash,window.location会保持在同一个document。

如果不需要,你可以不修改url。对比而言,设置window.location =
“#foo”;仅产生新的history实体,如果你当前的hash不是#foo

你可以将任意的数据与你的新history实体关联。使用基于hash的方法,需要将所有相关的数据编码为一个短字符串。

注意,pushState()方法不会使hashchange时间发生,即使是新旧url只是hash不同。

replaceState()方法
history.replaceState()
用起来很像pushState(),除了replaceState()是用来修改当前的history实体而不是创建一个新的。这个方法有时会很有用,当
你需要对某些用户行为作反应而更新一个state对象或者当前history实体时,可以使用它来更新state对象或者当前history实体的url。

popstate事件
当history实体被改变时,popstate事件将会发生。如果history实体是有pushState和replaceState方法产生的,popstate事件的state属性会包含一份来自history实体的state对象的拷贝

详见window.onpopstate

读取当前的state

读取现有state

当页面加载时,它可能会有一个非空的state对象。这可能发生在当页面设置一个state对象(使用pushState或者replaceState)之后用户重启了浏览器。当页面重新加载,页面将收到onload事件,但不会有popstate事件。然而,如果你读取history.state属性,将在popstate事件发生后得到这个state对象
var currentState = history.state;
Browsers: Tested and Working In

HTML5 Browsers
Chrome 8,9,10
Firefox 4
Safari 5
Opera 11
Safari iOS 4.3
HTML4 Browsers

IE6,7,8,9
Firefox 3
Opera 10
Safari 4
Safari iOS prior to version 4.3

pushState与replaceState区别

history.pushState(state, title, url)


将当前URL和history.state加入到history中,并用新的state和URL替换当前。不会造成页面刷新。

state:与要跳转到的URL对应的状态信息。

title:可以不传

url:要跳转到的URL地址,不能跨域。

history.replaceState(state, title, url)


用新的state和URL替换当前。不会造成页面刷新。

state:与要跳转到的URL对应的状态信息。

title:可以不传

url:要跳转到的URL地址,不能跨域。


两者看似没有区别,其实区别很大的,pushState是添加历史记录的,而replaceState是不添加的。

history新特性pushState、replaceState及两者的区别,html5pushstate
DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可…

出处:

一、简单介绍 history 中的操作

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

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

 

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

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

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

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

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

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

   
参数:state:存储一个对象,可以添加相关信息,可以使用 history.state 读取其中的内容。

    【代码如下】

      title:历史记录的标题(目前浏览器不支持)。

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

      url:创建的历史记录的链接。进行历史记录操作时会跳转到该链接。

  方法一:
       

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

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

     参数:state:存储一个对象,可以添加相关信息,可以使用 history.state 读取其中的内容。

  

       title:历史记录的标题(目前浏览器不支持)。

 

       url:创建的历史记录的链接。进行历史记录操作时会跳转到该链接。

  方法二:

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

  

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

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

  二、使用方法

  

    取消默认的返回操作:

 

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

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

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

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

// history.pushState(state, title, url);
// history.replaceState(state, title, url); 替换

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

    2.监听 popstate 事件

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

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

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

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

  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,””,”);
      
 替换当前历史记录点replaceState():修改当前的history实体,不会新增。
                   
类似replace(url),要更新当前历史记录的状态对象或URL时,使用replaceState()方法会更合适。
    

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

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

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