前端技术之history1

浅浅的花香味﹌ 2022-06-09 07:40 177阅读 0赞

一、当页面没有前驱历史记录时（就是当前为新弹出的页面，没法做goback操作即history.[Go][](-1)）,我们就需要用到，history.lengthl了。

1. 判断浏览器的类型navigator.userAgent.indexOf('MSIE') >= 0

ie: history.length=0, 非IE的为1

if(history.length > 0){  
                window.history.go( -1 );  
            }else{  
               做自己的操作 
    }

二、在H5出生以前，我们可以通过window.history访问浏览器的历史记录信息。

History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 [back()][back]、[forward()][forward] 和 [go()][go] 方法。

在H5出来之后，带来了2种对History的新操作，history.pushState()和history.replaceState()；这些方法会和window.onpostate事件一起工作，window.onpostate用来捕获监听历史记录改变事件。

1. history.pushState(state,title,url)往浏览器历史记录顶端添加一条历史记录，注意，如果是ifame跳转，这条记录在浏览器记录之前，也就是说后退时先触发浏览器的记录，退回前一页，再触发history.pushState加的这条记录，要像改变顺序，可以用settimeout延时。这个我在之前的一章里有详细说明。

详情请看：http://blog.csdn.net/tan9374/article/details/77734400

state：该条历史记录的state对象，用来传递参数；json对象格式；可以为空；  
title：该条历史记录的标题，可以为空；  
url : 该条历史记录的URL.不可以为空；

2. history.replaceState(state,title,url)修改当前URL。这个和上边的是一样的。

3. window.onpopstate 用来监听history的改变事件。

这三个一般都是配合使用的。

[Go]: http://lib.csdn.net/base/go
[back]: http://www.w3school.com.cn/jsref/met_his_back.asp
[forward]: http://www.w3school.com.cn/jsref/met_his_forward.asp
[go]: http://www.w3school.com.cn/jsref/met_his_go.asp