本文摘自PHP中文网,作者青灯夜游,侵删。

如果你想获取站点的URL信息,那么window.location
对象什么很适合你!使用其属性获取有关当前页面地址的信息,或使用其方法进行某些页面重定向或刷新
1 2 3 4 5 6 7 8 9 |
|
1 2 3 4 |
|
window.location 属性
window.location | 返回值 |
---|---|
.origin | 站点主地址(协议 + 主机名 + 端口) |
.protocol | 协议架构 (http: 或者 htts: ) |
.host | 域名 + 端口 |
.port | 端口 |
.pathname | 最前页的 '/' 后面跟的路径 |
.search | ? 后跟的查询字符串 |
.hash | 从 # 号开始的部分 |
.href | 完整网址 |
host 和 hostname 的区别
在上面的示例中,你可能注意到host
和hostname
返回相同的值。那么为什么要这些属性。好吧,这与端口号有关,让我们来看看。
没有端口的 URL
https://segmentfault.com/search
1 2 3 4 |
|
带端口的 URL
https://segmentfault.com/search"8080
1 2 3 4 |
|
因此,host
将包括端口号,而hostname
将仅返回主机名。
如何更改 URL 属性
我们不仅可以调用location` 属性来检索URL信息,还可以使用它来设置新属性并更改URL。
1 2 3 4 5 |
|
下面是你可以更改的属性的完整列表
1 2 3 4 5 6 7 8 9 |
|
唯一不能设置的属性是window.location.origin
,此属性是只读的。
Location 对象
window.location
返回一个Location
对象。它为我们提供有关页面当前地址的信息。但是我们还可以通过几种方式访问Location
对象。
1 2 3 4 |
|
我们这样做的原因是这些是我们浏览器中的全局变量。
相关阅读 >>
更多相关阅读请进入《javascript》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者