zoukankan      html  css  js  c++  java
  • 浏览器根对象window之history

    1. history(H5)

    Window.history保存用户在一个会话期间的网站访问记录,用户每次访问一个新的URL即创建一个新的历史记录。

    1.1 length

    返回浏览器历史列表中的 URL 数量。

    1.2 scrollRestoration[H5]

    目前(2018.01)这是一个实验性的API,请勿在生产环境中使用它。

    History API:ScrollRestoration

    允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的(auto)或者手动的(manual)。

    1.3 state

    该参数与pushState和replaceState配合使用,它始终表示当前页面(使用pushState或replaceState创建的)的state状态值。

    1.4 go/back/forward

    history.back()和history.forward()分别表示向后一页和向前一页。

    history.go(num)表示向前或向后翻多少页,num为正数表示向前翻,为负数则向后翻。

    history.back()等价于history.go(-1),history.forward()等价于history.go(1)。

    执行这三个中的任一方法,触发浏览器的popstate事件,如果只是hash部分发生变化,还可能同时触发hashchange事件。

    1.5 pushState/replaceState[H5]

    HTML5新增的两个API。

    history.pushState(state, title, url)

    意思就是把一个history记录插入到历史记录中。state:与要跳转到的URL对应的状态信息。title:页面标题。url:要跳转到的URL地址,不能跨域。

    history.replaceState(state, title, url)

    用新的state和URL替换当前。不会造成页面刷新。state:与要跳转到的URL对应的状态信息。title:页面标题。url:要跳转到的URL地址,不能跨域。

    与之相关的事件window.onpopstate。详参22.1 见下方。

    参数详解

    state: 状态对象是一个由 pushState()方法创建的、与历史纪录相关的JS对象。当用户定向到一个新的状态时,会触发popstate事件。事件的state属性包含了历史纪录的state对象。(译者注:总而言之,它存储JSON字符串,可以用在popstate事件中。)state 对象可以是任何可以序列化的东西。由于 火狐 会将这些对象存储在用户的磁盘上,所以用户在重启浏览器之后这些state对象会恢复,我们施加一个最大640k 的字符串在state对象的序列化表示上。如果你像pushState() 方法传递了一个序列化表示大于640k 的state对象,这个方法将扔出一个异常。如果你需要更多的空间,推荐使用sessionStorage或者localStorage。

    title:火狐浏览器现在已经忽略此参数,将来也许可能被使用。考虑到将来有可能的改变,传递一个空字符串是安全的做法。当然,你可以传递一个短标题给你要转变成的状态。(译者注:现在大多数浏览器不支持或者忽略这个参数,最好用null代替)。

    URL:这个参数提供了新历史纪录的地址。请注意,浏览器在调用pushState()方法后不会去加载这个URL,但有可能在之后会这样做,比如用户重启浏览器之后。新的URL不一定要是绝对地址,如果它是相对的,它一定是相对于当前的URL。新URL必须和当前URL在同一个源下;否则,pushState() 将丢出异常。这个参数可选,如果它没有被特别标注,会被设置为文档的当前URL。

    优势

    一些情况下,调用pushState和设置 window.location = "#foo"相当,这种状况下,这两种行为都会创建和激活另一个和当前页面有关的历史纪录。但是pushState()有其他优势:

    新URL可以是当前URL同源下的任意地址。相反的,设置window.location会让你保持在相同页面,除非你只修改hash.

    如果不必要,你可以不改变URL,相反的,将window.location设定为“#foo”;只会创建一个新的历史纪录,如果当前hash不为#foo.

    You can associate arbitrary data with your new history entry. With the hash-based approach, you need to encode all of the relevant data into a short string.你可以关联任意的数据到你的新历史纪录中。使用基于hash的方法,你需要将所有相关 的数据编码为一个短字符串。

    注意

    请注意pushState()和replaceState()方法绝不会导致hashchange 事件被激活,即使新的URL和旧的只在hash上有区别。

    1.6 onpopstate[H5]

    当活动历史记录条目更改时,将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState() 的调用创建的,或者受到对history.replaceState() 的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本。详参6.5 见上方。

    需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在Javascript代码中调用history.back())

    不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件,但Firefox则不会。

    有兼容性问题:浏览器兼容性

    window.onpopstate = function(event) {
      alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
    };
    history.pushState({page: 1}, "title 1", "?page=1");
    history.pushState({page: 2}, "title 2", "?page=2");
    history.replaceState({page: 3}, "title 3", "?page=3");
    history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
    history.back(); // alerts "location: http://example.com/example.html, state: null
    history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
    

    需要注意的是,使用history.pushState和history.replaceState两个API改变的浏览器历史记录才能触发该事件(通过location.hash改变URL也会触发该事件),其他的方式比如点击按钮进行的页面导航,不会触发该事件。

    <!DOCTYPE html>
    <html><head><meta charset="UTF-8"></head>
    <body>
    <script>
        window.onpopstate = function(event) {
            alert('ok');
        };
        function changeURL (){
            location.search = '?page=1';
        }
        function changeState (){
            history.pushState('nDos','title','?nDos=1')
        }
    </script>
    <button value="点击导航到下一个页面" onclick = 'changeURL()'>点击导航到下一个页面</button>
    <button value="点击添加状态" onclick = 'changeState()'>点击添加状态</button>
    </body>
    </html>
    

    上述代码运行后,点击浏览器回退按钮,只有第一次回退触发了onpopstate事件。将上述location.search = '?page=1';改为location.hash = '#page';点击按钮马上就会触发onpopstate事件。

  • 相关阅读:
    SQL Server SQLHelper帮助类
    Winform 常用的方法
    SQL Server 插入含有中文字符串出现乱码现象的解决办法
    ComboBox 中 DisplayMember 和 ValueMember 都是具体干什么的?
    HTML常用标签属性使用
    虚拟机安装windows server 2012 R2
    VS2017生成带图标的QT项目方法
    QSS 记录
    QT qss资源文件与代码分离
    pgsql 服务遇见的问题记录
  • 原文地址:https://www.cnblogs.com/ndos/p/8233021.html
Copyright © 2011-2022 走看看