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程序设计有所帮助。

赞 (0)

相关推荐

  • js点击button按钮跳转到另一个新页面

    点击按钮怎么跳转到另外一个页面呢?我们在网站制作中可能是需要的,因为有时我们需要做这样的效果,尤其是将按钮做成一个图片,而点击图片要跳转到新的页面时,怎么做到呢? 这样的效果可以:onclick="window.location='新页面'" 来实现. 1.在原来的窗体中直接跳转用 代码如下 window.location.href="你所要跳转的页面"; 2.在新窗体中打开页面用: 代码如下 window.open('你所要跳转的页面'); window.hist

  • js实现页面跳转的几种方法小结

    按钮式: <INPUT name="pclog" type="button" value="GO" onClick="location.href='http://www.jb51.net/'"> 链接式: <a href="javascript:history.go(-1)">返回上一步</a> <a href="<%=Request.ServerV

  • JS实现页面超时后自动跳转到登陆页面

    JS代码: 复制代码 代码如下: <script language="javascript">   var myTime = setTimeout("Timeout()", 60000);   function resetTime() {       clearTimeout(myTime);       myTime = setTimeout('Timeout()', 60000);   }  function Timeout() {       al

  • JavaScript实现页面跳转的几种常用方式

    本文实例讲述了JavaScript实现页面跳转的几种常用方式.分享给大家供大家参考,具体如下: 第一种: <script language="javascript" type="text/javascript"> window.location.href="login.jsp?backurl="+window.location.href; </script> 第二种: <script language="j

  • javascript实现倒计时跳转页面

    很多网页都有类似的效果,那就是经过指定的时间能够跳转到其他页面,如果再人性化一点话,会带有倒计时效果,本章节就介绍一下如何实现此效果,代码实例如下: <script type="text/javascript"> var t=10; setInterval("refer()",1000); function refer(){ if(t==0){ location.href="http://www.jb51.net"; } docume

  • JavaScript实现页面5秒后自动跳转的方法

    这个JavaScript控制页面5秒后自动跳转的代码在很多开发中经常需要用到,感兴趣的朋友可以收藏一下! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>JavaScript控制页面5秒后自动跳转的代码</title> <script type="text/j

  • 基于JavaScript实现定时跳转到指定页面

    在某些场景下,需要网页在指定的时间后,网页能够自动跳转到指定页面,比如在无法找到指定网页的情况下,就会显示之前设置好的404页面,并且跳转到指定的页面,下面就是一段代码实现了此效果. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/&q

  • 基于JS实现移动端访问PC端页面时跳转到对应的移动端网页

    基于JS实现移动端访问PC端页面时跳转到对应的移动端网页

    不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,以下实现思路经过小编测试过,放心使用. 1.效果图 PC端访问显示: 移动端访问显示: 2.实现: 不考虑移动端搜索引擎优化的话,只需要通过JS判断是否移动端,然后确定是否跳转到指定页面就行了,主要JS如下: //判断是否移动端,如果是则跳转到指定的URL地址 function browserRedirect(url) { //只读的字符串,

  • JavaScript中通过提示框跳转页面的方法

    通过提示框跳转页面具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-"> <title>Document</title> </head> <body> <script> window.onload = function(){ //设置当页面加载时执行 var btn =do

  • js实现页面跳转的五种方法推荐

    js实现页面跳转的五种方法推荐 第一种: 复制代码 代码如下: <script language="javascript" type="text/javascript"> window.location.href="xx.jsp?backurl="+window.location.href; </script> 第二种: 复制代码 代码如下: <script language="javascript&quo

  • js点击返回跳转到指定页面实现过程

    这个功能之前有简单的带过,这次详细的讲解下原理和存在的问题(由于是运用html5的新API 所以有兼容问题,推荐移动端使用该方法). 功能描述: 在浏览器中新建标签页并指定一个网址,网页加载完毕后,正常流程下是不允许点击返回的.因为当前标签页的相关历史记录是没有的,所以没有记录可以返回. 应客户要求,需要在这种情况下,给他的历史记录里添加一个链接(比如首页),这样在新打开的页面,点击返回就可以跳转到首页,让用户看到系统的各种功能,推广平台. 一.知识要点 HTML5引进了history.push

  • JavaScript实现单击下拉框选择直接跳转页面的方法

    本文实例讲述了JavaScript实现单击下拉框选择直接跳转页面的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/JavaScript"> <!-- function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

  • jsp和servlet中实现页面跳转的方式实例总结

    本文实例总结了jsp和servlet中实现页面跳转的方式.分享给大家供大家参考,具体如下: 假设要求从test1.jsp 跳转到test2.jsp 一. jsp中跳转: 1. 使用RequestDispatcher.forward方法转发 <% RequestDispatcher rd = getServletContext().getRequestDispatcher("/test/test2.jsp"); rd.forward(request, response); %>

  • Json实现异步请求提交评论无需跳转其他页面

    主要将代码粘贴,通过阅读代码理解其中的相关逻辑. html代码: <form id="form1" runat="server"> <p> 评论:</p> <p> 姓名:<input type="text" name="username" id="username1" /></p> <p> 内容:<textarea n

  • js判断登录与否并确定跳转页面的方法

    本文实例讲述了js判断登录与否并确定跳转页面的方法.分享给大家供大家参考.具体如下: 使用session存储,确定用户是否登录,从而确定页面跳转至哪个页面. 判断本地有无customerID: function jumpTo(p, url) { var customerId=sessionStorage.customerId; if (customerId == undefined) { p.attr("href", "page/Login/login.html")

随机推荐