本文汇总了JavaScript中实现页面跳转的多种常用方法,包括按钮点击跳转、链接式返回、直接脚本跳转、新窗口打开以及结合弹窗确认的跳转方式。通过具体的代码示例,详细解析了location.href、history.back、window.navigate及window.open等属性的使用场景与实现细节,帮助开发者快速掌握前端页面导航技巧。
常见页面跳转方式概览
按钮式跳转通常通过HTML表单元素触发。
<INPUT name="pclog" type="button" value="GO" onClick="location.href='https://www.jb51.net/'">
链接式跳转利用锚点标签结合JavaScript事件或服务器变量实现返回上一页的功能。
<a href="javascript:history.go(-1)">返回上一步</a>
<a href="<%=Request.ServerVariables("HTTP_REFERER")%>">返回上一步</a>
直接跳转式通过脚本直接修改当前窗口的URL属性,实现无交互的自动重定向。
<script>window.location.href='https://www.jb51.net';</script>
开新窗口方式利用链接点击事件调用窗口打开函数,指定窗口尺寸和滚动条等属性。
<a href="javascript:" onClick="window.open('https://www.jb51.net/blog /guestbook.asp','','height=500,width=611,scrollbars=yes,status=yes')"& gt;布丁足迹</a>
第一种方法通过修改window.location.href属性,将当前页面重定向到指定URL,例如登录页并携带当前地址作为参数。
基于location属性的跳转实现
<script language="javascript" type="text/javascript">
window.location.href="login.jsp?backurl="+window.location.href;
</script>
第二种方法结合alert弹窗提示后,调用history.back(-1)实现返回上一页的操作。
<script language="javascript">
alert("返回");
window.history.back(-1);
</script>
第三种方法使用window.navigate函数指定目标页面路径,实现页面跳转。
<script language="javascript">
window.navigate("top.jsp");
</script>
第四种方法通过设置self.location属性,将当前窗口重定向到指定页面。
<script language="JavaScript">
self.location='top.htm';
</script>
第五种方法在弹出警告提示后,通过top.location属性强制顶层窗口跳转到指定页面,常用于处理非法访问。
<script language="javascript">
alert("非法访问!");
top.location='xx.jsp';
</script>
结合JavaScript弹出选择框的跳转方式:定义函数时利用confirm对话框询问用户确认,若用户点击确定,则执行window.location.href跳转至注销页面。
结合弹窗确认的跳转逻辑
<script language="javascript">
<!--
function logout()...{
if (confirm("你确定要注销身份吗?是-选择确定,否-选择取消"))...{
window.location.href="logout.asp?act=logout"
}
}
-->
</script>
结合JavaScript弹出提示框的跳转方式:定义函数时利用alert对话框显示提示信息,随后执行window.location.href跳转至注销页面。
<script language="javascript">
<!--
function logout()...{
alert("你确定要注销身份吗?");
window.location.href="logout.asp?act=logout"
}
-->
</script>
以上介绍了JavaScript实现页面跳转的几种主要方法,包括按钮、链接、直接脚本、新窗口及弹窗确认跳转,供开发者参考使用。