打赏

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  孟繁贵  阅读(625)  评论(0编辑  收藏  举报
TOP