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”,则会跳转到文档的开始处