location属性解释 - window.location & $location

Posted 2020-08-05 3尺尘沙

window.location

所有浏览器都支持 window 对象。它表示浏览器窗口。所有 javascript 全局对象、函数以及变量均自动成为 window 对象的成员。

• 全局变量是 window 对象的属性
• 全局函数是 window 对象的方法

window.location 对象用于获得当前页面的地址 (URL)信息，并把浏览器重定向到新的页面，一般在编写时可不使用 window 这个前缀。

属性	描述
hash	设置或返回从#开始的 URL（锚）
host	设置或返回主机名和当前 URL 的端口号
hostname	设置或返回当前 URL 的主机名
href	设置或返回完整的 URL
pathname	设置或返回当前 URL 的路径部分
port	设置或返回当前 URL 的端口号
protocol	设置或返回当前 URL 的协议
search	设置或返回从?开始的 URL（查询部分）

 

对象方法	描述
assign()	加载新的文档。
reload()	重新加载当前文档。
replace()	用新的文档替换当前文档。

其他 
ancestorOrigins:DOMStringList
toString() 
valueOf()
__proto__ :Object —— 原型链

 

以这个URL为例：http://www.baidu.com:80/demo/show?ver=1.0&id=6#imhere

• href: "http://www.baidu.com:80/demo/show?ver=1.0&id=6#imhere"
• protocol: "http:"
• hostname: "www.baidu.com"
• port: "80"
• pathname: "/demo/show"
• search: "?ver=1.0&id=6"
• hash: "#imhere"
• host: "www.baidu.com:80"　　             host = hostname + port
• origin: "http://www.baidu.com:80"       origin = protocol + host

1.location.assign( url )
　　location.assign(‘http://www.baidu.com‘); 等同于 window.location = ‘http://www.baidu.com‘
　　这种方式会讲新地址放到浏览器历史栈中，意味着转到新页面后“后退按钮”仍可以回到该页面。
2.location.replace( url )
　　与assign方法一样，但会从浏览器历史栈中删除本页面，或者说当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录，也就是说跳转到新页面后“后退按钮”不能回到该页面。
3.location.reload( force ) 重新载入当前页面

　　默认值false，false则从浏览器缓存中重载。会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

　　force为true时，以GET方式从服务器端重载，在http请求头中不会包含缓存标记，因为无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 键的效果是完全一样。（W3School）

 还有一种刷新页面的方法： history.go(0)