详解location对象

首先控制打印看一下

1. location属性

console.log(location)

location是挂在window的对象也是document下的对象

window.location
document.location
location
// 指的是同一个

以下方的url地址为例测试location

http://127.0.0.1:8848/testshare/location.html?lang=en&name=zhangsan#test/most
  • Location.href

包含整个URL地址返回

href: "http://127.0.0.1:8848/testshare/location.html?lang=en&name=zhangsan#test/most"

 当location.href赋值时会跳转     

location.href = 'http://www.baidu.com'   
// 跳转
  • Location.protocol

包含URL对应协议 http 或者https,最后有一个":"。

protocol: "http:"
  • Location.host

包含了域名,可能在该串最后带有一个":"并跟上URL的端口号。

host: "127.0.0.1:8848"
  • Location.hostname

包含URL域名

hostname: "127.0.0.1"
  • Location.port

包含端口号。

port: "8848"
  • Location.pathname

包含URL中路径部分,开头有一个“/"。

pathname: "/testshare/location.html"
  • Location.search

 包含URL参数,开头有一个“?”。

search: "?lang=en&name=zhangsan"
  • Location.hash

 包含块标识符,开头有一个“#”。 哈希值 vue-router中的哈希模式就是用这个。

hash: "#test/most"
  • Location.origin 只读

包含页面来源的域名,也是从哪个页面跳转来的

origin: "http://127.0.0.1:8848"

全部打印结果为

2. location的方法

  • Location.reload()

Location.reload() 方法用来刷新当前页面。该方法只有一个参数,当值为 true 时,将强制浏览器从服务器加载页面资源,当值为 false 或者未传参时,浏览器则可能从缓存中读取页面。

location.reload(true);
// 无缓存刷新页面(但页面引用的资源还是可能使用缓存,
// 大多数浏览器可以通过设置在打开开发者工具时禁用缓存实现无缓存需求)
  • Location.assign() 

Location.assign()方法会触发窗口加载并显示指定的URL的内容

document.location.assign('https://www.baidu.com');
  • Location.replace()

Location.replace() 方法以给定的URL来替换当前的资源。 与assign() 方法 不同的是,调用 replace() 方法后,当前页面不会保存到会话历史中(session History),这样,用户点击回退按钮时,将不会再跳转到该页面。

document.location.replace('https://www.baidu.com');

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章