HTML页面跳转的5种方法

客官°小女子只卖身不卖艺 2022-01-07 19:37 242阅读 0赞

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

** **

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

**2) javascript的实现**

优点：灵活，可以结合更多的其他功能  
缺点：受到不同浏览器的影响  
**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）**

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

转载于:https://www.cnblogs.com/goforitjava/p/3439022.html