天天看点

HTML页面跳转的5种方法

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

1) html的实现

<head> 

<meta http-equiv="refresh" content="10">

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

</head>

优点:简单

缺点:Struts Tiles中无法使用

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>

  • 文章作者:hery
  • 本文地址:http://www.socss.cn/2011/tool_0920/186.html
  • 版权所有 ? 转载时请以链接形式注明作者和原始出处!

继续阅读