History 对象

转载

mob6047570116b7 2021-08-11 17:32:00

文章标签 历史记录地址栏局部刷新加载导航栏 文章分类 代码人生

History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

注释：没有应用于 History 对象的公开标准，不过所有浏览器都支持该对象。

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

window.history的简单使用

历史记录中前进/后退，移动到指定历史记录点：

window.history.back();
window.history.forward();//加载 history 列表中的下一个 URL

windiw.history.go(-1);//相当于back()
window.history.go(1);//相当于forwar()
window.history.go(0);//相当于刷新
window.history.length;//查看历史记录栈中一共有多少个记录

对历史记录点进行修改

Html5的新API扩展了window.history，能够做到可以存储/替换/监听历史记录点

history.pushState(state, title, url)

在history内新增一个历史记录，会增加后退效果，无刷新改变浏览器地址

>接受三个参数：
>state：状态对象，记录历史记录点的额外对象，可为null
>title：页面标题，目前所以浏览器都不支持，需要的话可以用document.title来设置
>url：新的网址，必须同域，浏览器地址栏会显示这个网址

window.history.pushState(null, '', 'a.html');
//页面不刷新，只是改变history对象，地址栏会改变
window.history.pushState(null, '', '#aaa');
>//url参数带了hash值并不会触发hashchange事件

url参数如果是以'?'开头，则url的值会代替seach的值，如果是以'#'开头，则url的值会代替hash的值，如果是以'/'开头，则url的值会代替/后的值。

history.replaceState(state, title, url)

使用姿势跟pushState一样，区别它是修改浏览历史中的当前记录，而并非创建一个新的，并不会增加后退效果，但是和pushState一样都会改变当前地址栏的地址
```
window.history.replaceState({a:1}, '', 'b.html')
```
history.state属性

返回当前页面的state对象，想改变此对象可以给pushState和replaceState的第一个参数传参
```
window.history.state //{a:1}
```

监听历史记录

hashchange：当前url的hash改变的时候会触发该事件，ie6.7不支持。

window.onhashchange = function(){
    console.log(location.hash)
};//hashchange事件必须绑定再widnow对象上

做兼容，在ie6、7下可以用setInterval模拟

if(('onhashchange' in window) && ((typeof document.documentMode === 'undefined') || document.documentMode == 8)) {
    //在IE8以ie7的模式运行时，window下存在onhashchange这个方法，但是永远不会触发这个事件
    //不能用 typeof window.onhashchange === ‘undefined’ 来检测，因为很多支持onhashchange的浏览器下，其初始值就是undefined
    window.onhashchange = function() {
        console.log(window.location.hash);
    };
} else {//不支持onhashchange用定时器判断hash是否改变
    var location = window.location;
    var oldHash = location.hash;
    setInterval(function() {
        var newHash = location.hash;
        if(newHash === oldHash) {
            console.log(location.hash);
        }
    })
}