天天看點

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
  • 版權所有 ? 轉載時請以連結形式注明作者和原始出處!

繼續閱讀