Java入門到架構師教程之JavaScript：history物件和location物件、JavaScript設計模式系統講解與應用
阿新 • • 發佈：2021-12-21
一、history物件
history 物件是歷史物件。包含使用者（在瀏覽器視窗中）訪問過的 URL。history 物件是 window 物件的一部分，可通過 window.history 屬性對其進行訪問。
history物件的屬性：length，返回瀏覽器歷史列表中的 URL 數量。
history物件的方法：
back()：載入 history 列表中的前一個 URL。
forward()：載入歷史列表中的下一個 URL。當頁面第一次訪問時，還沒有下一個url。
go(number|URL): URL 引數使用的是要訪問的 URL。而 number 引數使用的是要訪問的 URL 在 History 的 URL 列表中的相對位置。go(-1)，到上一個頁面。
1、013-history.html
<body>
<a href="013-history-a.html">013-history-a.html</a>
<h1>我是第一個頁面</h1>
<input type="button" value="前進" onclick="window.history.forward();" />
<script>
console.log(window.history);
</script>
</body>
2、013-history-a.html
<body>
<a href="013-history-b.html">013-history-b.html</a>
<h1>我是A頁面</h1>
<input type="button" value="後退" onclick="window.history.back();"/>
</body>
3、013-history-b.html
<body>
<h1>我是B頁面</h1>
<input type="button" value="第一個頁面" onclick="window.history.go(-2);"/>
<input type="button" value="後退" onclick="window.history.back();"/>
</body>二、location物件
location 物件是window物件之一，提供了與當前視窗中載入的文件有關的資訊，還提供了一些導航功能。也可通過 window.location 屬性來訪問。
location 物件的屬性 href：設定或返回完整的 URL
location 物件的方法
reload()：重新載入當前文件。
replace()：用新的文件替換當前文件。
<script type="text/javascript">
function openBaidu(){
// 沒有歷史記錄,用新的文件替換當前文件
// window.location.replace("http://www.baidu.com");
// console.log(window.location.href); // 獲取完整的url
window.location.href = "http://www.baidu.com";
}
</script>
<body>
<input type="text" value="" />
<input type="button" value="重新整理" onclick="window.location.reload();" />
<input type="button" value="百度" onclick="openBaidu();" />
</body>
三、JavaScript設計模式系統講解與應用
關於JavaScript設計模式講解應用這一塊，建議學習下面這套教程即可，獲取方式圖片中有。
課程內容豐富完整，學習JavaScript非常不錯。歡迎來學習JavaScript設計模式講解與應用。
四、本節作業
實現時間計時功能
JS的跳轉方式
本文是全套Java入門到架構師全套教程中的JavaScript中的BOM物件課程文件，如需完整體系大資料教程資源請留言評論或私聊。