history.go()

admin發表於2018-11-10
Go

此方法載入瀏覽歷史列表中的指定頁面。

筆者當年剛接觸web的時候，對於此方法並沒有真正的理解。

只知道history.go(-1)可以返回前一個頁面，history.go(1)進入下一個頁面。

首先解釋一下瀏覽歷史記錄，當瀏覽頁面的時候，如果沒特別的設定，會將瀏覽器過的頁面快取起來。

當再次訪問這些頁面的時候，可以從快取中讀取，提高效率，當然也可以設定不快取這些頁面。

瀏覽器截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/10/144650e52kl2pdsxd6skdx.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

點選後退或者前進按鈕，可以從歷史記錄中讀取當前頁面的前一個或者下一個URL內容。

history.go方法同樣可以實現前進或者後退功能。

更多內容可以參閱JavaScript history 物件一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
history.go(number|URL)

引數解析:

（1）.number：一個數字，當前頁面number值是0，那麼上一個url就是-1，下一個url就是1，以此類推。

（2）.URL：字串，URL地址，可以載入列表第一個匹配的URL頁面內容。

瀏覽器支援:

（1）.IE瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera瀏覽器支援此方法。

（5）.火狐瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){ 
  let obt=document.getElementById("bt"); 
  obt.onclick = function () {
    history.go(-1);
  } 
} 
</script> 
</head> 
<body> 
<input type="button" id="bt" value="檢視演示"/> 
</body> 
</html>

點選按鈕可以載入瀏覽器記錄中，當前頁面url所在位置前一個url頁面內容。

當然必須歷史記錄中有對應的內容，上述程式碼才會生效。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){ 
  let obt=document.getElementById("bt"); 
  obt.onclick = function () {
    history.go(1);
  } 
} 
</script> 
</head> 
<body> 
<input type="button" id="bt" value="檢視演示"/> 
</body> 
</html>

點選按鈕可以載入瀏覽器記錄中，當前頁面url所在位置下一個url頁面內容。

數字是一個表示歷史列表中url位置相對值，當前頁面對應數字是0，下一個是1，前一個是-1。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){ 
  let obt=document.getElementById("bt"); 
  obt.onclick = function () {
    history.go("http://www.softwhy.com");
  } 
} 
</script> 
</head> 
<body> 
<input type="button" id="bt" value="檢視演示"/> 
</body> 
</html>

此方法的引數也可以是一個具體的url。

那麼會在瀏覽歷史列表中查詢此url，找到第一個後，就會載入此url。

相關文章