浏览器定位和导航

1.概念

Window对象的location属性引用的是Location对象，他比爱哦是该窗口中当前显示的文档URL

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

window.location === document.location
// true

两者区别：

Document对象也有一个URL属性，是文档首次载入后保存该文档的URL的静态字符串

若定位到文档的片段标识符（如#table-of-contents），Location对象会相应的更新，而document.URL不会改变

2.解析URL

如：https://www.baidu.com/

Location对象的href属性是一个字符串，包含URL的完整文本（httpsLocation.toString()

window.location.href

// 返回的就是href属性的值

// https://www.baidu.com/

参考网址如下：https://www.baidu.com/?name=123#password=123456

2.1.URL分解属性

window.location.href  返回整个文本
// "https://www.baidu.com/?name=123#password=123456"
window.location.hash  返回第一个#之后的所有文本
// "#password=123456"
window.location.protocol 返回协议
// "https:"
window.location.host 返回域名
// "www.baidu.com"
window.location.hostname 返回域名
// "www.baidu.com"
window.location.port 返回端口
// ""
window.location.pathname 返回路径
// "/"
window.location.search 返回第一个？之后第一个#之前
// "?name=123"

2.2.载入新的文档

（1）window.location.assign()

window.location.assign("https://cn.bing.com/?mkt=zh-CN")
// 使窗口载入并显示指定URL中的文档

（2）window.location.replace()

window.location.replace("https://cn.bing.com/?mkt=zh-CN")
// 使窗口载入并显示指定URL中的文档
// 与assign类似

　　　　

　　两者区别：

　　　　①：replace（）方法会在载入新文档之前，从浏览历史记录里把当前文档删除

　　　　若脚本无条件载入一个新文档，replace（）方法比assign（）方法更优，否则，“后退”按钮会把浏览器带回到原始文档，而相同的脚本会再次载入新文档。

　　　　②：如果检测到用户浏览器不支持某写特性来显示功能齐全的版本，可以用replace（）方法来载入静态的HTML版本

if(!XMLHttpRequest) {
   location.replace("staticpage.html")  
}
// 如果浏览器不支持XMLHttpRequest对象
// 则重定向一个不需要Ajax的静态页面

（3）window.location.reload()  让浏览器重新载入当前页面

（4）片段标识符：如#top

　　不会让浏览器重新载入新的文档，只会让它滚动到文档的某个位置

location = "#top"
// 跳转至文档的顶部
// #top标识符是个特殊的例子，
// 如果文档没有id为“top”，则会跳转到文档的开始处