浏览器中location详解

浏览器中location详解

window.location对象用于获取当前页面的URL信息。

属性解析

1. href

当前页面的URL

比如访问github.com,在控制台中输入location.href,则结果如下所示

https://github.com/

href赋值可以进行URL跳转:

  • 不携带协议,访问的当前域名对应的资源:

    在控制台中输入location.href = '/asset',那么就会跳转到https://github.com/asset

  • 携带协议的话就跳转到新URL:
    在控制台中输入location.href = 'http://localhost:8080',那么就会跳转到http://localhost:8080

其他用法:
top.location.href=”url” 在顶层页面打开url(跳出框架)
self.location.href=”url” 仅在本页面打开url地址
parent.location.href=”url”   在父窗口打开Url地址
在页面中我们可能会嵌套一些iframe,以上topselfparent就可以改变iframe中地址。

2. pathname

当前资源的路径。

比如访问github.com/vuejs,在控制台中输入location.pathname,则结果如下所示

/vuejs

pathname赋值可以进行访问其他资源,跟href传入不带协议的用法相同,但是不会处理协议。
在控制台中输入location.pathname = 'http://localhost:8080',访问的是github.com/vuejs/http:/localhost/asset

3. host

当前页面域名,可能在该串最后带有一个:并跟上 URL 的端口号。

访问github.com,在控制台中输入location.host,结果如下所示:

github.com

访问localhost:8080,结果如下所示:

localhost:8080

host赋值替换掉当前访问的域名,但是后边的资源路径并不会变

当前页面域名https://github.com/vuejs

在控制台中输入location.host = 'localhost:8080',当前域名会变成https://localhost:8080/about。同样不解析协议。

4. hostname

当前页面域名(不包含端口号)

访问github.com,在控制台中输入location.hostname,结果如下所示:

github.com

访问localhost:8080,结果如下所示:

localhost

hostname赋值替换掉当前访问的域名,但是后边的资源路径并不会变

当前页面域名https://github.com/vuejs

在控制台中输入location.host = 'localhost:8080',当前域名会变成https://localhost:8080/about。同样不解析协议。

5. port

当前页面域名端口号.

访问github.com,在控制台中输入location.port,结果如下所示:

''

访问localhost:8080,结果如下所示:

8080

port赋值替换掉当前访问的域名的端口,其他的并不会变

6. origin

当前页面来源的域名的标准形式。

访问github.com/vuejs,在控制台中输入location.origin,结果如下所示:

https://github.com

访问localhost:8080,结果如下所示:

http://localhost:8080

赋值并不会进行跳转

7. protocol

当前页面域名协议。

访问github.com/vuejs,在控制台中输入location.protocol,结果如下所示:

https:

赋值中如果没有协议或者不是标准域名形式都会报错

8. hash

包含页面URL标识中的 # 和后面 URL片段标识符

访问github.com,在控制台中输入location.hash,结果如下所示:

''

访问localhost:8080/#/about,结果如下所示:

#/about

通常在hash路由模式中使用到,而history模式则无用。

赋值会替换掉#后的字符

9. search

当前页面URL?字符后面的查询参数。

hashhistory模式中,查询参数的获取并不同。

history中,通过search获取。访问https://github.com/search?q=vue&type=,在控制台中输入location.search,结果如下所示:

?q=vue&type=

而在hash中,search则为空,#后边的全部字符都在hash属性中。访问http://localhost:8080/#/about?id=1,结果:

hash: '#/about?id=1',
search: ''

history模式中赋值会替换掉后的字符,而hash模式直接插入到#字符前面

方法

1. reload

location.reload()

用来刷新当前页面,就像刷新按钮一样。

2. replace

location.replace(url);

替换当前页面的URL,不过当前页面不会保存到会话历史中。这样,用户点击回退按钮时,将不会再跳转到该页面。

3. assign

location.assign(url);

加载新文档

你可能感兴趣的:(javascript,前端,javascript,servlet)