Javascript页面跳转常见实现方式汇总

前端技术 2023/09/02 JavaScript

本文实例总结了Javascript页面跳转常见实现方式。分享给大家供大家参考，具体如下：

概述

相信很多Web开发者都知道，在开发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>

标签嵌套：

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

第三种：指定跳转页面 对框架无效。

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

第四种：指定自身跳转页面 对框架无效。

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

第五种：指定自身跳转页面 对框架有效。

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

第六种：按钮式 在button按钮添加 事件跳转。

复制代码 代码如下:
<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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/4057

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案