HTML页面跳转(重定向)的五种方法

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

 

[html]  view plain copy print ?
  1. <head>  
  2.   
  3. <meta http-equiv="refresh" content="10">  
  4.   
  5. <meta http-equiv="refresh" content="5;url=hello.html">   
  6. head>  

优点:简单
缺点:Struts Tiles中无法使用

 

2) javascript的实现

 

[javascript]  view plain copy print ?
  1. "javascript" type="text/javascript">   
  2. // 以下方式直接跳转  
  3. window.location.href='hello.html';  
  4. // 以下方式定时跳转  
  5. setTimeout("javascript:location.href='hello.html'", 5000);   
  6.   

优点:灵活,可以结合更多的其他功能
缺点:受到不同浏览器的影响
3) 结合了倒数的javascript实现(IE)

 

[html]  view plain copy print ?
  1. <span id="totalSecond">5span>  
  2. <script language="javascript" type="text/javascript">   
  3. var second = totalSecond.innerText;   
  4. setInterval("redirect()", 1000);   
  5. function redirect(){   
  6. totalSecond.innerText=--second;   
  7. if(second<0location.href='hello.html';   
  8. }   
  9. script>  

优点:更人性化
缺点:firefox不支持(firefox不支持span、div等的innerText属性)
3') 结合了倒数的javascript实现(firefox)

[javascript]  view plain copy print ?
  1. "javascript" type="text/javascript">   
  2. var second = document.getElementById('totalSecond').textContent;   
  3. setInterval("redirect()", 1000);   
  4. function redirect()   
  5. {   
  6. document.getElementById('totalSecond').textContent = --second;   
  7. if (second < 0) location.href = 'hello.html';   
  8. }   
  9.   

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

[html]  view plain copy print ?
  1. <span id="totalSecond">5span>  
  2. <script language="javascript" type="text/javascript">   
  3. if(navigator.appName.indexOf("Explorer") > -1){   
  4. document.getElementById('totalSecond').innerText = "my text innerText";   
  5. } else{   
  6. document.getElementById('totalSecond').textContent = "my text textContent";   
  7. }   
  8. script>  
5) 整合3)和3')

[html]  view plain copy print ?
  1. <span id="totalSecond">5span>  
  2.   
  3. <script language="javascript" type="text/javascript">   
  4. var second = document.getElementById('totalSecond').textContent;   
  5.   
  6. if (navigator.appName.indexOf("Explorer") > -1)  {   
  7.     second = document.getElementById('totalSecond').innerText;   
  8. } else {   
  9.     second = document.getElementById('totalSecond').textContent;   
  10. }   
  11.   
  12. setInterval("redirect()", 1000);   
  13. function redirect() {   
  14. if (second < 0) {   
  15.     location.href = 'hello.html';   
  16. } else {   
  17.     if (navigator.appName.indexOf("Explorer") > -1) {   
  18.         document.getElementById('totalSecond').innerText = second--;   
  19.     } else {   
  20.         document.getElementById('totalSecond').textContent = second--;   
  21.     }   
  22. }   
  23. }   
  24. script>  

 

你可能感兴趣的:(HTML5,HTML,html,html5,dom)