使用HTML+javaScript/PHP实现页面跳转的几种方法教程Html

印迹发布于:2019-4-11 1153

下面列了几个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件。

1) html的实现

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

优点:简单

缺点:Struts Tiles中无法使用

建议:刷新时间>3秒,否则可能会被搜索引擎认为作弊,影响整站SEO效果

2) javascript的实现

<script language="javascript" type="text/javascript"> 
// 以下方式直接跳转
window.location.href='hello.html';
// 以下方式定时跳转
setTimeout("javascript:location.href='hello.html'", 5000); 
</script>

优点:灵活,可以结合更多的其他功能

缺点:受到不同浏览器的影响

3) 结合了倒数的javascript实现(IE)

<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript"> 
var second = totalSecond.innerText; 
setInterval("redirect()", 1000); 
function redirect(){ 
totalSecond.innerText=--second; 
if(second<0) location.href='hello.html'; 
} 
</script>

优点:更人性化

缺点:firefox不支持(firefox不支持span、div等的innerText属性)

3') 结合了倒数的javascript实现(firefox)

<script language="javascript" type="text/javascript"> 
var second = document.getElementById('totalSecond').textContent; 
setInterval("redirect()", 1000); 
function redirect() 
{ 
document.getElementById('totalSecond').textContent = --second; 
if (second < 0) location.href = 'hello.html'; 
} 
</script>

4) 解决Firefox不支持innerText的问题

<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript"> 
if(navigator.appName.indexOf("Explorer") > -1){ 
document.getElementById('totalSecond').innerText = "my text innerText"; 
} else{ 
document.getElementById('totalSecond').textContent = "my text textContent"; 
} 
</script>

5) 整合3)和3')

<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript"> 
var second = document.getElementById('totalSecond').textContent; 
 
if (navigator.appName.indexOf("Explorer") > -1)  { 
    second = document.getElementById('totalSecond').innerText; 
} else { 
    second = document.getElementById('totalSecond').textContent; 
} 
setInterval("redirect()", 1000); 
function redirect() { 
if (second < 0) { 
    location.href = 'hello.html'; 
} else { 
    if (navigator.appName.indexOf("Explorer") > -1) { 
        document.getElementById('totalSecond').innerText = second--; 
    } else { 
        document.getElementById('totalSecond').textContent = second--; 
    } 
} 
} 
</script>

6. 需要用到window里的方法: setTimeout 经过指定毫秒值后计算一个表达式。 

例子: 

window.setTimeout("alert('Hello, world')", 1000);

这个是写在js代码里面的; 

具体实现如下:

<script type="text/javascript"> 
onload=function(){ <span style="white-space:pre"> </span>//在进入网页的时候加载该方法 
setTimeout(go, 5000); <span style="white-space:pre"> </span> /*在js中是ms的单位*/ 
}; 
function go(){ 
location.href="http://localhost:8080/TestDemo/index.jsp"; 
} 
</script> 
//5秒之后自动执行go方法,直接跳转到index.jsp页面

7. 倒数的实现

上面例子的缺陷是能够实现跳转,但不知道什么时候跳转,实现倒数3-2-1; 

settimeout方法做不了; 

setInterval 每经过指定毫秒值后计算一个表达式。 

没过相同的时间,就会执行相应的函数。具体的实现方法: 

<script type="text/javascript"> 
onload=function(){ 
setInterval(go, 1000); 
}; 
var x=3; //利用了全局变量来执行 
function go(){ 
x--; 
if(x>0){ 
document.getElementById("sp").innerHTML=x; //每次设置的x的值都不一样了。 
}else{ 
location.href='res.html'; 
} 
} 
</script>


跳转源码二

1.跳转1

<meta http-equiv="refresh" content="5;url=http://www.virplus.com/">

2.跳转2

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>正在加载......</title>
</head>
<body>
<form name=loading> 
  <p align=center> <font color="#0066ff" size="2">正在进入,请稍等</font><font color="#0066ff" size="2" face="Arial">...</font>
  <input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;"> 
   <input type=text name=percent size=47 style="color:#0066ff; text-align:center; border-width:medium; border-style:none;"> 
  <script>  
var bar=0  
var line="||"  
var amount="||"  
count()  
function count(){  
bar=bar+2  
amount =amount + line  
document.loading.chart.value=amount  
document.loading.percent.value=bar+"%"  
if (bar<99)  
{setTimeout("count()",100);}  
else  
{window.location =http://www.virplus.com;}  
}</script> 
 </p> 
</form><p align="center">
测试:html网页自动跳转代码<br/>
如果您的浏览器不支持跳转,<a style="text-decoration: none" href="http://www.virplus.com"><font color="#FF0000">请点这里</font></a>.</p>
</body>
</html>

3.跳转3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5秒后跳转到另一个页面</title>
</head>
<script>
var t = 5;
var s = '.';
timeID=setInterval("countDown()",1000);
function countDown(){
time.innerHTML= t +"秒后跳转"+s;
t--;
s+='.';
if (t==0) {
location.href="http://www.virplus.com/thread-280.htm"; //【要跳转的网站】
clearInterval(timeID);
}
}
</script>
<body>
<div><font ID="time" face="impact" color="#272822" size="7">即将跳转</font>
</div>
</body>
</html>

4.利用表单+javascript自动提交,实现自动跳转

<form name="form1" action="http://www.virplus.com/thread-280.htm" method="get">
</form>
<script language="javascript">
document.form1.submit()
</script>

优点:搜索引擎无法解析javascript,所以引擎无法识别跳转

问题:浏览器不支持javascript,无法正常跳转

5. 利用javascript脚本实现跳转:

<script language="javascript">
location.replace("http://www.virplus.com/thread-280.htm")
</script>

优点:搜索引擎无法解析javascript,所以引擎无法识别javascript脚本的自动跳转

问题:浏览器不支持javascript,无法正常跳转


PHP跳转

1、php跳转代码一句话式:

<?php $url = $_GET['url']; 
Header("Location:$url"); 
?>

2、php跳转代码if判断式:

if($_COOKIE["u_type"]){ 
    header('location:register.php'); 
} 
else{ 
   setcookie('u_type','1','86400*360');//设置cookie长期有效 
    header('location:zc.html'); 
}

3、php跳转代码javascript式:

<?php $url=czbin.php; 
echo "<!--<SCRIPT LANGUAGE="javascript">"; 
echo "location.href='$url'"; 
echo "</SCRIPT>-->"; 
?>

4、php跳转代码HTML标记式(META的REFRESH属性):

<HTML> 
<HEAD> 
<META HTTP-EQUIV="REFRESH" CONTENT="10"; URL=www.php.cn/> 
</HEAD> 
<BODY> 
</BODY> 
</HTML>

5、php跳转代码HTTP头信息(Header函数)式:

<?php 
$url=czbin.php;
Header("HTTP/1.1 303 See Other"); 
Header("Location:$url"); 
exit;  
?>



http://www.virplus.com/thread-280.htm
转载请注明:2019-4-11 于 VirPlus 发表

推荐阅读
最新回复 (0)

    ( 登录 ) 后,可以发表评论!

    返回