location.href和location.replace()区别

快乐打工仔 分类:实例代码

本章节介绍一下标题中两个概念的区别,希望能够给需要的朋友带来一定的帮助。

通过这种方式来实现url的跳转功能,在表面上看效果是一样的,其实内在的区别还是很大的。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script>
window.onload=function(){
  var btOne=document.getElementById("one");
  var btTwo=document.getElementById("two");
  btOne.onclick=function(){
    location.href="http://www.pipipi.net";
  }
  btTwo.onclick=function(){
    location.replace("http://www.pipipi.net");
  }
}
</script>
</head>
<body>
<input type="button" id="one" value="loaction.href"/>
<input type="button" id="two" value="replace"/>
</body>
</html>

上面的代码演示两种方式实现页面的跳转,下面介绍一下两者的区别。

特别说明:请将代码复制到本地测试,在本编辑器可能无法测试正确的效果。

如果使用location.href,那么我们可以使用浏览器的返回按钮回到之前的页面,截图如下:

前端教程

如果使用loaction.replace()方式,那么则无法使用返回按钮,截图如下:

前端教程

下面说明一下原因:

访问页面的时候通常会在本地有缓存,使用location.href方式,只是打开一个新的页面,在历史记录中追加一条。

但是使用location.replace()方法,它会替换上一个页面在本地的缓存,自然就不会使用返回上一页了。

回复

我来回复
  • 暂无回复内容