JavaScript(js)实现页面跳转总结

2012-04-15 10:28:08|?次阅读|上传:wustguangh【已有?条评论】发表评论

关键词:JavaScript, Web|来源:唯设编程网

设计网页时,经常需要使用页面跳转功能,使用JavaScript(js)实现页面跳转可以使你的页面更加灵活,同时它也支持非超链接进行跳转,本文将常用的跳转方式进行总结。

1. JavaScript(JS)页面跳转的第一个实例:

首先是一个基本的实例,实现定时自动跳转:

<span id="tiao">3</span>
<a href="javascript:countDown"></a>
秒后自动跳转……
<meta http-equiv=refresh content=3;url='/search/billsearch.jsp'</ul>
<!--脚本开始-->
<script language="javascript" type="">
function countDown(secs){
  tiao.innerText=secs;
  if(--secs>0)
   setTimeout("countDown("+secs+")",1000);
  }
  countDown(3);
</script>
<!--脚本结束-->

2. 常用跳转方式总结

使用JavaScript(JS)实现页面跳转通常使用的方式有:Input按钮式、超链接、直接跳转和弹出新窗口,下面分别给出实例

2.1 使用Input按钮失效跳转:

<INPUT name="pclog" type="button" value="GO" onClick="location.href='http://www.ddhbb.com/'">

2.2 使用超链接进行跳转:

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

2.3直接跳转到其它页面:

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

2.4 弹出新窗口:

<a href="javascript:" onClick="window.open('http://www.ddhbb.com/blog/guestbook.asp','','height=500,width=611,scrollbars=yes,status=yes')">但我弹出</a>

3. JavScript(JS)页面跳转代码

下面分别给出几种常用的JavaScript(JS)页面跳转代码

3.1 使用window.location对象跳转:
<script language="javascript" type="text/javascript">
window.location.href="login.jsp?backurl="+window.location.href;
</script>
3.2 使用history对象跳转:
<script language="javascript">
alert("返回");
window.history.back(-1);
</script>
3.3 使用navigate进行页面跳转:
<script language="javascript">
window.navigate("top.jsp");
</script>
3.4 使用self.location实现页面跳转:
<script language="JavaScript">
self.location=’top.htm’;
</script>
3.5 使用top.location跳转:
<script language="javascript">
alert("非法访问!");
top.location=’xx.jsp’;
</script>

4. 补充实例

4.1 弹出选择框跳转到其他页面
<script language="javascript">
<!--
function logout()...{
if (confirm("你确定要注销身份吗?是-选择确定,否-选择取消"))...{
window.location.href="logout.asp?act=logout"
}
}
-->
</script>
4.2 弹出提示框跳转到其他页面
<script language="javascript">
<!--
function logout()...{
alert("你确定要注销身份吗?");
window.location.href="logout.asp?act=logout"
}
-->
</script>

好了,对JavaScript(JS)页面跳转的总结就基本完成了,如果你还有建议和补充,欢迎在评论栏进行讨论。

发表评论0条 】
网友评论(共?条评论)..
JavaScript(js)实现页面跳转总结