hash和history 原理

hash

1.url# 右面的,样式不好看    

2.虽然在url里面,但是不会被http请求,对后端没有什么影响,改变hash不会重新刷新页面(包括F5刷新)

hash主要是一个事件:hashchang     当hash改变时,就会触发这个事件

补充:window.location对象里面有

hash: 设置或返回从 (#) 开始的URL(锚)。

host: 设置或返回主机名和当前URL的端口号。

hostname:设置或返回当前URL的主机名。

href: 设置或返回完整的URL。

pathname: 设置或返回当前URL的路径部分。

port:设置或返回当前URL的端口号。

search: 设置或返回从问号 (?) 开始的URL(查询部分)。

assign() : 加载新的文档。

reload() : 重新加载当前文档。

replace() : 用新的文档替换当前文档。

hashchange事件有两个属性:



history

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)这两个方法应用于浏览器的历史记录

栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,

但浏览器不会立即向后端发送请求。

window.history(可写成history)指向History对象,他表示当前history的浏览历史

History对象保存了当前窗口访问过的所有页面网址(history.length属性保存着历史记录的url数量)

自带的跳转方法:

go() 接受一个整数为参数,移动到该整数指定的页面,比如history.go(1)相当于history.forward(),history.go(-1)相当于history.back(),history.go(0)相当于刷新当前页面

back() 移动到上一个访问页面,等同于浏览器的后退键,常见的返回上一页就可以用back(),是从浏览器缓存中加载,而不是重新要求服务器发送新的网页

forward() 移动到下一个访问页面,等同于浏览器的前进键如果移动的位置超出了访问历史的边界

(补充:以上三个方法并不报错,而是默默的失败)

        新添了 pushstate 和  replacestate 的属性    

state: 一个与指定网址相关的状态对象,popState事件触发时,该对象会传入回调函数,如果不需要这个对象,此处可填null

title: 新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null

url: 新的网址,必须与当前页面处在同一个域,浏览器的地址栏将显示这个网址

        popState 事件:

每当同一个文档的浏览历史(即history)出现变化时,就会触发popState事件

需要注意:仅仅调用pushState方法或replaceState方法,并不会触发该事件,只有用户点击浏览器后退和前进按钮时,或者使用js调用back、

forward、go方法时才会触发。另外该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件不会被触发

使用的时候,可以为popState事件指定回调函数回调函数的参数是一个event事件对象,它的state属性指向pushState和replaceState方法为当前url

所提供的状态对象(即这两个方法的第一个参数)。上边代码中的event.state就是通过pushState和replaceState方法为当前url绑定的state对象

这个state也可以直接通过history对象读取history.state

注意:页面第一次加载的时候,浏览器不会触发popState事件


对比

pushState()设置的新的url可以是于当前url同源的任意url,而hash只可修改#后面的部分,因此只能设置与当亲url同文档的url

pushState()设置的新的url可以与当前url一摸一样,这样也会把记录添加到栈中;而hash设置的新值必须与原来的不一样才会触发动作将记录添加到栈中

pushState()通过stateObject参数可以添加任意类型的数据到记录中;而hash只可添加短字符串

pushState()可额外设置title属性提供后续使用


你可能感兴趣的:(hash和history 原理)