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

阅读目录

一、通过JS跳转页面
　　第一种：直接跳转加参数
　　第二种：返回上一次预览界面<上一页>
　　第三种：指定跳转页面对框架无效。。。
　　第四种：指定自身跳转页面对框架无效。。
　　第五种：指定自身跳转页面对框架有效。
　　第六种：按钮式在button按钮添加事件跳转。。
　　第七种：在新窗口打开：
　　第八种、html中使用meta中跳转，通过meta可以设置跳转时间和页面
二、重复不想删
三、隔几秒跳转：
　　1、meta 标签的方式
　　2、可以通过setTimeout
　　3、显示秒数跳转，
四、javascript中弹出选择框跳转到其他页面

【转】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" onclick="new_page()" value="在新窗口打开s"/> 
<input type="button" onclick="old_page()" value="跳转后有后退功能"/> 
<input type="button" onclick="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 onload="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>

posted @ 2018-12-01 18:10 Alive_2020 阅读(5061) 评论(4) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步

编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具

公告

昵称： Alive_2020
园龄： 6年11个月
粉丝： 27
关注： 55

<

2025年3月

>

日

一

二

三

四

五

六

23

24

25

26

27

28

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

随笔档案 (301)

阅读排行榜