浏览器定位和导航

：点上面关注免费学习前端知识！

---

Window对象的location属性引用的是Location对象，它表示该窗口中当前显示的文档的URL，并定义了方法来使窗口载入新的文档。

Document对象的location属性也引用到Location对象：

window.location===document.location//总是返回true

Document对象也有一个URL属性，是文档首次载入后保存该文档的URL的静态字符串。如果定位到文档中的片段标识符（如#table-of-contents），Location对象会做相应的更新，而document.URL属性却不会改变。

解析URL

Window对象的location属性引用的是Location对象，它表示该窗口中当前显示的文档的URL。Location对象的href属性是一个字符串，后者包含URL的完整文本。Location对象的toString()方法返回href属性的值，因此在会隐式调用toString()的情况下，可以使用location代替location.href。

这个对象的其他属性——protocol，host，hostname，port，pathname和Search，分别表示URL的各个部分。它们称为“URL分解”属性，同时被Link对象（通过HTML文档中的＜a＞和＜area＞元素创建）支持。

Location对象的hash和search属性比较有趣。如果有的话，hash属性返回URL中的“片段标识符”部分。search属性也类似，它返回的是问号之后的URL，这部分通常是某种类型的查询字符串。一般来说，这部分内容是用来参数化URL并在其中嵌入参数的。虽然这些参数通常用于运行在服务器上的脚本，但在启用JavaScript的页面中当然也可以使用它们。

载入新的文档

Location对象的assign()方法可以使窗口载入并显示你指定的URL中的文档。replace()方法也类似，但它在载入新文档之前会从浏览历史中把当前文档删除。如果脚本无条件地载入一个新文档，replace()方法可能是比assgin()方法更好的选择。否则，“后退”按钮会把浏览器带回到原始文档，而相同的脚本则会再次载入新文档。如果检测到用户的浏览器不支持某些特性来显示功能齐全的版本，可以用location.replace()来载入静态的HTML版本。

//如果浏览器不支持XMLHttpRequest对象

//则将其重定向到一个不需要Ajax的静态页面

if(!XMLHttpRequest)location.replace("staticpage.html");

注意，在这个例子中传入replace()的是一个相对URL。相对URL是相对于当前页面所在的目录来解析的，就像将它们用于一个超链接中。

除了assgin()和replace()方法，Location对象还定义了reload()方法，后者可以让浏览器重新载入当前文档。

浏览器跳转到新页面的一种更传统的方法是直接把新的URL赋给location属性。

还可以把相对URL赋给location，它们会相对当前URL进行解析。

完

看前端技术文章，就在Web前端精髓