History和Location

Location 对象属性
属性描述
hash 设置或返回从井号 (#) 开始的 URL（锚）。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 URL（查询部分）。
Location 对象方法
属性描述
assign() 加载新的文档。
reload() 重新加载当前文档。
replace() 用新的文档替换当前文档。

onhashchange事件
这是一个HTML 5新增的事件，当#值发生变化时，就会触发这个事件。
IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。
它的使用方法有三种：
　　window.onhashchange = func;
　　<body οnhashchange="func();">
　　window.addEventListener("hashchange", func, false);
对于不支持onhashchange的浏览器，可以用setInterval监控location.hash的变化。

window.history.pushState()

需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL.
让我们来解释下这三个参数详细内容：
1.状态对象 — 状态对象state是一个JavaScript对象，通过pushState () 创建新的历史记录条目。
无论什么时候用户导航到新的状态，popstate事件就会被触发，且该事件的state属性包含该历史记录条目状态对象的副本。
状态对象可以是能被序列化的任何东西。原因在于Firefox将状态对象保存在用户的磁盘上，以便在用户重启浏览器时使用，
我们规定了状态对象在序列化表示后有640k的大小限制。
如果你给 pushState() 方法传了一个序列化后大于640k的状态对象，该方法会抛出异常。
如果你需要更大的空间，建议使用 sessionStorage 以及 localStorage

2.标题 — Firefox 目前忽略这个参数，但未来可能会用到。
在此处传一个空字符串应该可以安全的防范未来这个方法的更改。
或者，你可以为跳转的state传递一个短标题。

3.URL — 该参数定义了新的历史URL记录。
注意，调用 pushState() 后浏览器并不会立即加载这个URL，但可能会在稍后某些情况下加载这个URL，
比如在用户重新打开浏览器时。新URL不必须为绝对路径。
如果新URL是相对路径，那么它将被作为相对于当前URL处理。
新URL必须与当前URL同源，否则 pushState() 会抛出一个异常。
该参数是可选的，缺省为当前URL。

history.replaceState() 的使用与 history.pushState() 非常相似，
区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。
注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。
replaceState() 的使用场景在于为了响应用户操作，你想要更新状态对象state或者当前历史记录的URL。

window.onpopstate是popstate事件在window对象上的事件处理程序.
每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发.
如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的,
则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.
调用history.pushState()或者history.replaceState()不会触发popstate事件.
popstate事件只会在浏览器某些行为下触发,
比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).
当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.

巴特西

History和Location

最新文章

热门文章