浏览器中location详解
window.location对象用于获取当前页面的URL信息。
属性解析
1. href
当前页面的URL。
比如访问,在控制台中输入location.href,则结果如下所示
https:///对href赋值可以进行URL跳转:
- 不携带协议,访问的当前域名对应的资源:
在控制台中输入location.href = '/asset',那么就会跳转到https:///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,以上top,self,parent就可以改变iframe中地址。
2. pathname
当前资源的路径。
比如访问/vuejs,在控制台中输入location.pathname,则结果如下所示
/vuejs对pathname赋值可以进行访问其他资源,跟href传入不带协议的用法相同,但是不会处理协议。
在控制台中输入location.pathname = 'http://localhost:8080',访问的是/vuejs/http:/localhost/asset。
3. host
当前页面域名,可能在该串最后带有一个:并跟上 URL 的端口号。
访问,在控制台中输入location.host,结果如下所示:
访问localhost:8080,结果如下所示:
localhost:8080对host赋值替换掉当前访问的域名,但是后边的资源路径并不会变
当前页面域名https:///vuejs
在控制台中输入location.host = 'localhost:8080',当前域名会变成https://localhost:8080/about。同样不解析协议。
4. hostname
当前页面域名(不包含端口号)
访问,在控制台中输入location.hostname,结果如下所示:
访问localhost:8080,结果如下所示:
localhost对hostname赋值替换掉当前访问的域名,但是后边的资源路径并不会变
当前页面域名https:///vuejs
在控制台中输入location.host = 'localhost:8080',当前域名会变成https://localhost:8080/about。同样不解析协议。
5. port
当前页面域名端口号.
访问,在控制台中输入location.port,结果如下所示:
''访问localhost:8080,结果如下所示:
8080对port赋值替换掉当前访问的域名的端口,其他的并不会变
6. origin
当前页面来源的域名的标准形式。
访问/vuejs,在控制台中输入location.origin,结果如下所示:
https://访问localhost:8080,结果如下所示:
http://localhost:8080赋值并不会进行跳转
7. protocol
当前页面域名协议。
访问/vuejs,在控制台中输入location.protocol,结果如下所示:
https:赋值中如果没有协议或者不是标准域名形式都会报错
8. hash
包含页面URL标识中的 # 和后面 URL片段标识符
访问,在控制台中输入location.hash,结果如下所示:
''访问localhost:8080/#/about,结果如下所示:
#/about通常在hash路由模式中使用到,而history模式则无用。
赋值会替换掉#后的字符
9. search
当前页面URL中?字符后面的查询参数。
在hash和history模式中,查询参数的获取并不同。
在history中,通过search获取。访问https:///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);加载新文档
















