JavaScript实现页面跳转的多种方法详解
作者：小括号时间：2026-10-27 15:45:47浏览：582
本文整理了JavaScript中实现页面跳转的多种常用方法，包括按钮点击跳转、链接式返回、直接URL重定向、新窗口打开以及带倒计时和确认框的跳转示例。通过具体代码片段，详细解析了window.location、history.back及setTimeout等关键API的使用场景与实现细节，帮助开发者快速掌握前端页面导航技术。
JavaScript实现页面跳转的多种方法详解
以下是具体的代码实现示例：
<!--脚本开始-->
<script language="javascript" type="">
function countDown(secs){
tiao.innerText=secs;
if(--secs>0)
setTimeout("countDown("+secs+")",1000);
}
countDown(3);
</script>
<!--脚本结束-->按钮与链接式跳转
第一种方法是通过按钮触发跳转：
代码如下：
<INPUT name="pclog" type="button" value="GO" onClick="location.href='http://www.ddhbb.com/'">第二种方法是通过链接实现返回上一页：
代码如下：
<a href="javascript:history.go(-1)">返回上一步</a>
<a href="<%=Request.ServerVariables("HTTP_REFERER")%>">返回上一步</a>直接URL重定向与新窗口打开
第三种方法是直接通过脚本指定URL进行跳转：
代码如下：
<script>window.location.href='http://www.ddhbb.com';</script>第四种方法是在新窗口中打开指定页面：
代码如下：
<a href="javascript:" onClick="window.open('http://www.ddhbb.com/blog/guestbook.asp','','height=500,width=611,scrollbars=yes,status=yes')">布丁足迹</a>JS跳转页面参考代码
以下是JS跳转页面的其他参考代码示例：
第一种情况：
代码如下：
<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>作者最新文章
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18