Location 對象：封裝了瀏覽器地址欄的 URL 信息

一、hash

返回 URL 中 hash(#后跟零個或者多個字符), 如果不包含, 返回空字符串
# 位置標識符 : 當前頁面的位置信息, 比如: 跳轉頂部

console.log(location.hash); // ""

二、host : 返回服務器名稱和端口號

console.log(location.host); // "localhost:63342"

三、hostname : 返回不帶端口號的服務器名稱

console.log(location.hostname); // localhost

四、href: 返回當前價在頁面的完整 URL

console.log(location.href); // http://localhost:63342/htmlcss/22_javascript%E5%9F%BA%E7%A1%80/day_12_ES6/03_BOM%E6%93%8D%E4%BD%9C/02_location%E5%AF%B9%E8%B1%A1.html?_ijt=hiop2dovhunhqnn2udlbo9ncbulocation.href = 'www.baidu.com'; // 跳轉到其他頁面

如果直接將 location.href 屬性修改為一個絕對路徑（或相對路徑），則頁面會自動跳轉到該路徑，并生成相應的歷史記錄。

五、pathname : 返回 URL 中的 目錄 和 文件名

console.log(location.pathname); // /htmlcss/22_javascript%E5%9F%BA%E7%A1%80/day_12_ES6/03_BOM%E6%93%8D%E4%BD%9C/02_location%E5%AF%B9%E8%B1%A1.htmlAndCss

六、port : 返回 URL 中執行的端口號

如果 URL 中不包含端口號, 則返回空字符串

console.log(location.port); // 63342

七、protocol : 返回頁面使用的協議, 通常指的是 http / https

console.log(location.protocol); // http:

八、search : 返回 URL 的查詢字符串, 這個字符串以 ? 開頭

console.log(location.search); // ?_ijt=hiop2dovhunhqnn2udlbo9ncbu

Location 對象的方法

一、location.reload() – 刷新頁面

location.reload(); // 重新加載當前頁面location.reload(true); // 在方法中傳遞一個 true，則會強制清空緩存刷新頁面

二、location.assign(str) – 跳轉頁面

location.assign('www.baidu.com'); // 作用和直接修改 location.href 一樣。

三、location.replcace() – 替換當前頁面

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

使用一個新的頁面替換當前的頁面，調用完畢也會跳轉頁面。但不會生成歷史紀錄，不能使用（后退按鈕）后退。

四、encodeURI('') – 中文 - URI編碼

console.log('恰飯'); // %E6%81%B0%E9%A5%AD

五、decodeURI('') – URI編碼 - 中文

console.log('%E6%81%B0%E9%A5%AD'); // 恰飯

History 對象

history 對象：可以用來操作瀏覽器的向前或向后翻頁。

history.length;

獲取瀏覽器歷史列表中的 url 數量。注意，只是統計當次的數量，如果瀏覽器關了，數量會重置為 1

history.back(); – 用來回退到上一個頁面，作用和瀏覽器的[回退按鈕]一樣。
history.forward(); – 用來跳轉下一個頁面，作用和瀏覽器的[前進按鈕]一樣。
history.go(); – 向前 / 向后跳轉 n 個頁面。

history.go(1); // 向前跳轉一個頁面，相當于 history.forword() history.go(2); // 向前跳轉兩個頁面 history.go(0); // 刷新當前頁面 history.go(-1); // 向后跳轉一個頁面，相當于 history.back() history.go(-2); // 向后跳兩個頁面

總結

以上是生活随笔為你收集整理的location 和 history的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。