当前位置：首页 > 全部内容 > JavaScript实现页面跳转的七种常用方法

JavaScript实现页面跳转的七种常用方法

作者：闭包旅人时间：2026-10-29 17:59:16浏览：203

本文汇总了JavaScript中实现页面跳转的七种常见方式，涵盖直接跳转、返回上一页、指定框架跳转、按钮触发及新窗口打开等场景。通过具体的代码示例，解析了window.location、history及window.open等对象的使用方法与参数配置，帮助开发者根据实际需求选择高效的跳转方案。

JavaScript页面跳转概述

本文整理并总结了JavaScript中实现页面跳转的几种常见方法，旨在为开发者提供参考与借鉴。

概述

在Web开发过程中，页面间的跳转是常见需求。虽然实现方式多样，但选择合适的方法能显著提升开发效率与用户体验。以下列举了在实际开发中常用的几种JavaScript跳转技巧，供读者共享参考。

直接跳转与参数传递

第一种：直接跳转并携带参数


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

直接跳转且无需携带参数：

代码如下：

<script>window.location.href='http://www.baidu.com';</script>

第二种：返回上一次预览界面

返回上一页的实现方式


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

利用HTML标签嵌套实现跳转：


<a href="javascript:history.go(-1)">返回上一步</a>
<a href="<%=Request.ServerVariables("HTTP_REFERER")%>">返回上一步</a>

第三种：指定目标页面进行跳转，此方法对框架（iframe）无效。

指定页面与框架跳转技巧


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

第四种：指定在当前窗口进行跳转，此方法对框架（iframe）无效。


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

第五种：指定在当前窗口进行跳转，此方法对框架（iframe）有效。

按钮触发与新窗口打开


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

第六种：通过按钮事件触发跳转。

代码如下：

<input name="pclog" type="button" value="GO" onClick="location.href='login.aspx'">

　　
第七种：在新窗口中打开页面：

代码如下：

<a href="javascript:" onClick="window.open('login.aspx','','height=500,width=611,scrollbars=yes,status=yes')">开新窗口</a>

　

应用实例：


<head> 
<script language="javascript">
function old_page() 
{ 
window.location = "login.aspx" 
} 
function replace() 
{ 
window.location.replace("login.aspx") 
} 
function new_page() 
{ 
window.open("login.aspx") 
} 
</script> 
</head> 
<body> 
<input type="button" onclick="new_page()" value="在新窗口打开s"/> 
<input type="button" onclick="old_page()" value="跳转后有后退功能"/> 
<input type="button" onclick="replace()" value="跳转后没有后退功能"/> 
</body>

希望上述内容能对各位JavaScript程序设计有所帮助。

作者最新文章

什么时候该用JS构造器：与工厂模式、字面量的选择对比

2026-11-05 16:18:22

推荐几款轻量级JS照片墙开源库及对比

2026-11-05 15:56:19

JavaScript递归写法有哪些常见陷阱及避免方法

2026-11-05 14:53:38

JS数组浅拷贝与深拷贝怎么选？场景与方法总结

2026-11-05 14:41:02

p5.js 中 setup() 和 draw() 函数的执行机制详解

2026-11-05 12:32:38

相关标签：

JavaScript页面跳转