HTML页面跳转的5种方法

时间 2020-07-08

标签 html 页面方法栏目 HTML 繁體版

原文原文链接

下面列了五个例子来详细说明，这几个例子的主要功能是：在5秒后，自动跳转到同目录下的hello.html（根据本身须要自行修改）文件。
1) html的实现javascript

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

优势：简单
缺点：Struts Tiles中没法使用html

2) javascript的实现java

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

优势：灵活，能够结合更多的其余功能
缺点：受到不一样浏览器的影响
浏览器

3) 结合了倒数的javascript实现（IE）app

  
  
  
  
   
   
   
   <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属性）
ide

3') 结合了倒数的javascript实现（firefox）ui

  
  
  
  
   
   
   
   <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的问题url

    
    
    
    
     
     
     
     <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')spa

    
    
    
    
     
     
     
     <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>

转载自：http://www.cnblogs.com/aszx0413/articles/1886819.htmlfirefox