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

Posted 3尺尘沙

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了location属性解释 - window.location & $location相关的知识,希望对你有一定的参考价值。

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)

 

以上是关于location属性解释 - window.location & $location的主要内容,如果未能解决你的问题,请参考以下文章

获取url链接上的参数值的函数

Cocos Creator 获取当前URL取参数

jQuery获取浏览器URL链接的值

nginx location配置详细解释

js中的location各种属性

window.location下的属性说明