详解JS中的window.location对象(备忘单)


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

如果你想获取站点的URL信息,那么window.location对象什么很适合你!使用其属性获取有关当前页面地址的信息,或使用其方法进行某些页面重定向或刷新

1

2

3

4

5

6

7

8

9

window.location.origin    → '"https://segmentfault.com'

               .protocol  → 'https:'

               .host      → 'segmentfault.com'

               .hostname  → 'segmentfault.com'

               .port      → ''

               .pathname  → '/search'

               .search    → '?q=前端小智'

               .hash      → '#2'

               .href      → 'https://segmentfault.com/search?q=前端小智#2'

1

2

3

4

window.location.assign('url')

               .replace('url')

               .reload()

               .toString()

window.location 属性

window.location返回值
.origin站点主地址(协议 + 主机名 + 端口)
.protocol协议架构 (http: 或者 htts:)
.host域名 + 端口
.port端口
.pathname最前页的 '/' 后面跟的路径
.search? 后跟的查询字符串
.hash# 号开始的部分
.href完整网址

host 和 hostname 的区别

在上面的示例中,你可能注意到hosthostname返回相同的值。那么为什么要这些属性。好吧,这与端口号有关,让我们来看看。

没有端口的 URL

https://segmentfault.com/search

1

2

3

4

window.location.host; // 'segmentfault.com'

window.location.hostname; // 'segmentfault.com'

 

window.location.port; // ''

带端口的 URL

https://segmentfault.com/search"8080

1

2

3

4

window.location.host; // 'segmentfault.com:8080'

window.location.hostname; // 'segmentfault.com'

 

window.location.port; // '8080'

因此,host将包括端口号,而hostname将仅返回主机名。

如何更改 URL 属性

我们不仅可以调用location` 属性来检索URL信息,还可以使用它来设置新属性并更改URL。

1

2

3

4

5

// 开始 'https://segmentfault.com/'

 

window.location.pathname = '/tidbits'; // 设置 pathname

 

// 结果 'https://segmentfault.com/tidbits'

下面是你可以更改的属性的完整列表

1

2

3

4

5

6

7

8

9

// 事例

window.location.protocol = 'https'

               .host     = 'localhost:8080'

               .hostname = 'localhost'

               .port     = '8080'

               .pathname = 'path'

               .search   = 'query string' // (这里不用写 `?`)

               .hash     = 'hash' // (这里不用写 `#`)

               .href     = 'url'

唯一不能设置的属性是window.location.origin,此属性是只读的。

Location 对象

window.location返回一个Location对象。它为我们提供有关页面当前地址的信息。但是我们还可以通过几种方式访问Location对象。

1

2

3

4

window.location          → Location

window.document.location → Location

document.location        → Location

location                 → Location

我们这样做的原因是这些是我们浏览器中的全局变量。

阅读剩余部分

相关阅读 >>

一起看看javascript异步剪贴板api

ie如何关闭javascript脚本

ios加载html5 audio标签时遇到的问题分享

javascript怎么保留两位小数

javascript和js之间有区别吗

javascript怎么获取dom元素

javascript怎么删除数组的指定元素

javascript如何获取url参数

理解javascript中的closure(闭包)

使用gpu.js提高javascript应用性能的小技巧

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...