詳解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');

 

 

 

 

 

 

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