【转】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>
方法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>
方法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>
方案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); } }
方案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>
四、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>