-
location 物件
-
location 物件是window物件下的一個屬性，使用時可以省略window物件
-
location可以獲取或者設定瀏覽地址欄的URL
-
<body>
<input type="button" value="https://www.cnblogs.com/dreamtown/archive/2021/03/06/點擊顯示" id="btn">
<p id="txt"></p>
<script>
var btn = document.getElementById("btn");
var txt = document.getElementById("'txt");
btn.onclick = function(){
//輸出URL地址
txt.innerHTML = location.href;
//重新賦值，可以跳轉到新頁面，并記錄歷史
location.href = "http://www.baidu.com";
};
</script>
</body>
- assign 委派 ，assign()方法的作用 與href屬性一樣，可以跳轉新頁面
location.assign("http://www.baidu.com");
- replace 替換,替換掉地址欄當前地址，不記錄歷史，無法回退
<input type="button" value="https://www.cnblogs.com/dreamtown/archive/2021/03/06/點擊" id="btn">
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
location.replace("http://www.baidu.com");
};
</script>
- reload 重新加載,與F5（類似于false效果重繪）重繪一樣，ctrl + F5強制重繪
引數：true：強制從服務器獲取頁面；false 如果瀏覽器有快取頁面的話，會直接從快取中獲取頁面
location.reload(true);
-
URL
-
統一資源定位符（Uniform Resource Locator，URL）
-
URL組成：scheme://host:port/path?query#fragment
scheme：通信協議，常用的http，ftp，maito等
host：主機，服務器（計算機）域名系統（DNS）主機名或IP地址
port：埠號，整數，可選，省略時使用方案的默認埠，如http默認埠號是80
path：路徑，由零或多個 ‘ / ’ 符號隔開的字串，一般用來表示主機上的一個目錄或檔案地址
query：查詢，可選，用于給動態網頁傳遞引數，可以有多個引數，用 ‘&’ 符合隔開，每個引數的名和值用 ‘=’ 符合隔開
fragment：資訊片段，字串，錨點
-
-
history 物件
- history 物件是window物件下的一個屬性，使用時可省略window物件
- history 物件可以與瀏覽器歷史記錄進行互動，瀏覽器歷史記錄是對用戶所訪問的頁面按時間順序進行的記錄和保存，從而實作前進后退來回訪問，
- back()
- forward()
- go()
利用history實作頁面跳轉，
<body>
<h1>一級頁面</h1>
<a href="https://www.cnblogs.com/dreamtown/archive/2021/03/06/second.html">跳轉到另一個html頁面</a><br>
<input type="button" value="https://www.cnblogs.com/dreamtown/archive/2021/03/06/前進" id="btn">
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
//點擊之后 查看之前記錄的跳轉頁面
history.forward();
}
</script>
</body>
second.html 頁面回退到頁面一功能
//second.html 頁面回退功能
btn.onclick = function(){
//點擊之后 查看之前記錄的跳轉頁面
history.back();
}
使用go()也可以實作頁面之間的跳轉，在go() 方法里， 前進就在括號里寫+1，后退則-1，注意，頁面層級多了，go（）里的數字也要相應改變
//go() 方法 前進+1，后退 —1
btn.onclick = function(){
//前進
history.go(1);
// 后退
history.go(-1);
//頁面層級多了，go（）里的數字也要相應改變
// 回退兩層
history.go(-2);
}
</script>
</body>
一般不常用，瀏覽器自帶有前進后退功能，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/266957.html
標籤：其他
上一篇：前端甘特圖dhtmx-gantt
下一篇：前端甘特圖dhtmx-gantt