打赏

JavaScript历史状态管理

1、API

（1）history.pushState：能够在不加载新页面的情况下改变浏览器的 URL

history.pushState({name:"Nicholas"}, "Nicholas' page", "nicholas.html");

执行 pushState() 方法后，新的状态信息就会被加入历史状态栈，而浏览器地址栏也会变成新的相对 URL。

但是，浏览器并不会真的向服务器发送请求，即使状态改变之后查询 location.href 也会返回与地址栏中相同的地址。另外，第二个参数目前还没有浏览器实现，因此完全可以只传入一个空字符串，或者一个短标题也可以。而第一个参数则应该尽可能提供初始化页面状态所需的各种信息。

因为 pushState() 会创建新的历史状态，所以你会发现“后退”按钮也能使用了。按下“后退”按钮，会触发 window 对象的 popstate 事件.

（2）replaceState

要更新当前状态，可以调用 replaceState() ，传入的参数与 pushState() 的前两个参数相同。调用这个方法不会在历史状态栈中创建新状态，只会重写当前状态。

 

注：

（1）新URL必须和当前URL在同一个源下;否则，pushState() 将丢出异常。

（2）pushState()方法绝不会导致hashchange 事件被激活。

2、示例

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>JavaScript历史状态管理</title>
    </head>

    <body>
        <div id="historyEvent">
            history API
        </div>
        <script>
            var historyEvent = document.getElementById('historyEvent');
            historyEvent.onclick = function() {
                //pushState 不能修改网页标题
                history.pushState(null, '新标签页标题', '/123');
                document.title = '新标签页标题'
            }
        </script>
    </body>

</html>

 

posted @ 2018-03-26 14:34  孟繁贵  阅读(637)  评论(0)    收藏  举报
TOP