JavaScript实现页面跳转的几种常用方式及location.replace与href的区别

JavaScript页面跳转的常用方法汇总

本文整理并介绍了JavaScript中实现页面跳转的几种常见方法，旨在为开发者提供实用的参考方案。

第一种跳转方式：

<script language="javascript" type="text/javascript"> 
    window.location.href="login.jsp?backurl="+window.location.href; 
</script> 

第二种跳转方式：

<script language="javascript">
    alert("返回");
    window.history.back(-1);
</script> 

第三种跳转方式：

<script language="javascript">
    window.navigate("top.jsp");
</script>

第四种跳转方式：

<script language="JavaScript">
    self.location='top.htm';
</script>

第五种跳转方式：

<script language="javascript">
    alert("非法访问！");
    top.location='xx.jsp';
</script>

第六种方式：通过JavaScript弹出确认框后跳转至其他页面。

<script language="javascript">
<!--
function logout()...{
if (confirm("你确定要注销身份吗？是－选择确定，否-选择取消"))...{
window.location.href="logout.asp?act=logout"
}
}
-->
</script>

第七种方式：通过JavaScript弹出提示框后跳转至其他页面。

<script language="javascript">
<!--
function logout()...{
alert("你确定要注销身份吗？");
window.location.href="logout.asp?act=logout"
}
-->
</script>

window.location与location.replace的区别解析

补充说明：window.location=""与location.replace("")的区别是什么？

两者均能实现网页重定向至新地址，但具体行为存在差异，例如是否支持参数传递等。关于Replace与Reload的区别，部分观点认为无明显区别，但实际测试表明，replace()和reload()主要用于重新加载当前页面，而replace()则允许重定向至另一个URL。以下通过具体示例进行说明：

假设存在三个页面：a.html、b.html和c.html。初始状态打开a.html，并通过链接从a.html跳转至b.html。

在b.html页面中，分别使用window.location.replace("c.html")和window.location.href("c.html")两种方法跳转至c.html页面。

从用户界面体验来看，两种跳转方式看似无异。但在c.html页面中设置一个“返回”按钮时，行为出现分歧。若使用window.location.href("c.html")跳转：

当进入c.html页面时，若c.html中调用window.history.go(-1)或window.history.back()，点击"返回"按钮将返回至b.html页面。但若通过window.location.replace("c.html")进入c.html，则上述返回方法失效，会跳转至a.html。原因在于window.location.replace("c.html")不向服务器发送请求即可跳转，而window.history.go(-1)与window.history.back()依据服务器记录的请求历史决定跳转目标，因此会跳至系统默认的a.html。

此时在c.html中调用window.history.go(-1)或window.history.back()将失效，页面会直接返回至a.html。这是因为window.location.replace("c.html")不向服务器发送请求进行跳转，而是替换当前历史记录条目；而history.go/back()依据服务器记录的历史决定跳转目标，因此会跳过b.html直接回到a.html。

相比之下，window.location.href("c.html")会向服务器发送请求并保留历史记录，因此history.go(-1)或window.history.back()能够正确返回至b.html。