Javascript实现页面跳转的几种方式

最新推荐文章于 2024-01-04 10:47:59 发布

weixin_30396699

最新推荐文章于 2024-01-04 10:47:59 发布

阅读量929

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sunxiuwen/p/10050475.html

版权

【转】Javascript实现页面跳转的几种方式

概述

相信很多Web开发者都知道，在开发Web程序的时候，对于页面之间的跳转，有很多种，但是有效的跳转则事半功倍，下面就是我在平时的开发过程中所用到的一些JavaScript跳转方式，拿出和大家共享一下。

一、通过JS跳转页面

　　第一种：直接跳转加参数

    <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';         # 之前已加载过的页面，从本地缓存拿，window.location.href 重定向重新获取
   </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>

　　第八种、html中使用meta中跳转，通过meta可以设置跳转时间和页面

<head>
    <!--只是刷新不跳转到其他页面 -->
    <meta http-equiv="refresh" content="5">
    <!--定时转到其他页面 -->
    <meta http-equiv="refresh" content="5;url=index.html"> 
</head>

二、重复不想删

1、通过javascript中实现跳转，定时跳

1 // 直接跳转
2 window.location.href='index.html';  //在原有窗口打开

3 // 定时跳转，仅执行一次 4 setTimeout("javascript:location.href='index.html'", 5000);

2、html跳转上一页的方式

window.history.go(-1)；或者window.history.back(-1)；

1 <script type="text/javascript">
2     var wrong = document.getElementById('btn');
3     wrong.onclick = function() { 
4     window.history.go(-1);//返回上一页
5     window.history.back(-1);//返回上一页
6    }
7 </script>

3、在html中写

<a href=”#” onClick=”JavaScript :history.back(1);”>返回上一页</a>
<a href=”#” onClick=”javascript :history.Go(-1);”>返回上一页</a>

1 function toBooks() {
2     
3     //在原有窗口打开
4     window.location.href = "http://www.baidu.com";
5     //打开新的窗口
6     window.open("http://www.baidu.com");
7 }

应用实例：

<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" οnclick="new_page()" value="在新窗口打开s"/> 
<input type="button" οnclick="old_page()" value="跳转后有后退功能"/> 
<input type="button" οnclick="replace()" value="跳转后没有后退功能"/> 
</body>

三、隔几秒跳转：

　　1、meta 标签的方式

<meta http-equiv="refresh" content="5;url=index.html">

可以在页面加载时改变url的地址

<script type="text/javascript">

$(document).ready(function () {
        var res = window.location.search;  // 获取url问号？及以后的参数
        redict_url = res.split("?")[1];
        $("a").attr('href', redict_url).html("你想访问的目标地址")
    });

</script>

　　2、可以通过setTimeout

<html>
<head>
<title> jquery 延迟跳转</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript">
 function delayURL(url,time){
 setTimeout("top.location.href = '" + url + "'",time);
 }
</script>
</head>
<body>
<a href="#" onClick="delayURL('http://www.baidu.com/',3000)">点击到百度</a>
</body>
</html>

　　3、显示秒数跳转，

方法1

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
<h1>注册成功</h1></p>
<p id="show"></p>
<p><a href=""></a></p>

</body>
<script type="text/javascript" src="{% static 'plugin/jquery-3.3.1/jquery3.3.1.min.js' %}"></script>
<script type="text/javascript">
    var redict_url = null;

    $(document).ready(function () {
        var res = window.location.search;
        redict_url = res.split("?")[1];
        $("a").attr('href', redict_url).html("你想访问的目标地址")
    });

    var t = 1000;//设定跳转的时间1000秒

    function refer(redict_url) {
        if (t == 0) {
            window.location.href = redict_url; //#设定跳转的链接地址
        }
        document.getElementById('show').innerHTML = "" + t + "秒后转入如下链接，如果长时间没有响应请直接点击："; // 显示倒计时
        t--; // 计数器递减
    }

    setInterval("refer(redict_url)", 1000); //启动1秒定时,1秒钟间隔执行一次

</script>
</html>

View Code

方法2 ===》在<head></head>之间加入js，然后在<body>里面加上<body οnlοad="Load('index.asp')"> index.asp为自己要跳转的页面。

<script language="javascript">
var secs = 3; //倒计时的秒数 
var URL ;
function Load(url){
URL = url;
for(var i=secs;i>=0;i--) 
{ 
   window.setTimeout('doUpdate(' + i + ')', (secs-i) * 1000); 
} 
}
function doUpdate(num) 
{ 
document.getElementById('ShowDiv').innerHTML = '将在'+num+'秒后自动跳转到主页' ;
if(num == 0) { window.location = URL; }
}
</script>

View Code

方法2 ===》在<body></body>之间加上<div id="ShowDiv"></div>，

<p style="text-indent: 2em; margin-top: 30px;">
系统将在 <span id="time">5</span> 秒钟后自动跳转至新网址，如果未能跳转，<a href="//www.jb51.net" title="点击访问">请点击</a>。</p>


<script type="text/javascript">  
    delayURL();    
    function delayURL() { 
        var delay = document.getElementById("time").innerHTML;
 var t = setTimeout("delayURL()", 1000);
        if (delay > 0) {
            delay--;
            document.getElementById("time").innerHTML = delay;
        } else {
     clearTimeout(t); 
            window.location.href = "//www.jb51.net";
        }        
    } 
</script>

View Code

方案3

$(function () {
 
      setInterval(ChangeTime, 1000);
 
    });
 
    function ChangeTime() {
 
      var time;
 
      time = $("#time").text();
 
      time = parseInt(time);
 
      time--;
 
      if (time <= 0) {
 
        window.location.href = "/Home/Index";
 
      } else {
 
        $("#time").text(time);
 
      }
 
    }

使用SetInterval

方案4

$(function () {
 
      setTimeout(ChangeTime, 1000);
 
    });
 
    function ChangeTime() {
 
      var time;
 
      time = $("#time").text();    
 
      time = parseInt(time);
 
      time--;
 
      if (time <= 0) {
 
        window.location.href = "/Home/Index";
 
      } else {
 
        $("#time").text(time);
 
        setTimeout(ChangeTime, 1000);
 
      }
 
    }
 
<div>你访问的页面出现异常,<span id="time">5</span>秒钟自动跳到首页</div>

使用SetTimeout：

四、javascript中弹出选择框跳转到其他页面

<script language="javascript">
<!--
function logout()...{
if (confirm("你确定要注销身份吗？是－选择确定，否-选择取消"))...{
window.location.href="logout.asp?act=logout"
}
}
-->
</script>

<script language="javascript">
<!--
function logout()...{
alert("你确定要注销身份吗？");
window.location.href="logout.asp?act=logout"
}
-->
</script>

转载于:https://www.cnblogs.com/sunxiuwen/p/10050475.html

weixin_30396699

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Javascript实现页面跳转的几种方式

【转】Javascript实现页面跳转的几种方式

一、通过JS跳转页面

第一种：直接跳转加参数

第二种：返回上一次预览界面<上一页>

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

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

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

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

第七种：在新窗口打开：

第八种、html中使用meta中跳转，通过meta可以设置跳转时间和页面

二、重复不想删

三、隔几秒跳转：

1、meta 标签的方式

2、可以通过setTimeout

3、显示秒数跳转，

四、javascript中弹出选择框跳转到其他页面

　　第一种：直接跳转加参数

　　第二种：返回上一次预览界面<上一页>

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

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

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

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

　　第七种：在新窗口打开：

　　第八种、html中使用meta中跳转，通过meta可以设置跳转时间和页面

　　1、meta 标签的方式

　　2、可以通过setTimeout

　　3、显示秒数跳转，