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>