location.href和location.replace()區別

antzone發表於2017-04-04

本章節介紹一下標題中兩個概念的區別，希望能夠給需要的朋友帶來一定的幫助。

通過這種方式來實現url的跳轉功能，在表面上看效果是一樣的，其實內在的區別還是很大的。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  var btOne=document.getElementById("one");
  var btTwo=document.getElementById("two");
  btOne.onclick=function(){
    location.href="http://www.softwhy.com";
  }
  btTwo.onclick=function(){
    location.replace("http://www.softwhy.com");
  }
}
</script>
</head>
<body>
<input type="button" id="one" value="loaction.href"/>
<input type="button" id="two" value="replace"/>
</body>
</html>

上面的程式碼演示兩種方式實現頁面的跳轉，下面介紹一下兩者的區別。

特別說明:請將程式碼複製到本地測試，在本編輯器可能無法測試正確的效果。

如果使用location.href，那麼我們可以使用瀏覽器的返回按鈕回到之前的頁面，截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201704/04/233702o5z00jsxb0aws6ar.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果使用loaction.replace()方式，那麼則無法使用返回按鈕，截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201704/04/233807h88nm6hmh858mw8a.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面說明一下原因：

訪問頁面的時候通常會在本地有快取，使用location.href方式，只是開啟一個新的頁面，在歷史記錄中追加一條。

但是使用location.replace()方法，它會替換上一個頁面在本地的快取，自然就不會使用返回上一頁了。

相關文章