zoukankan      html  css  js  c++  java
  • HTML页面跳转的5种方法

    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>
    
    
    孜孜不倦,必能求索;风尘仆仆,终有归途。
  • 相关阅读:
    Python元组、列表、字典
    测试通过Word直接发布博文
    Python环境搭建(windows)
    hdu 4003 Find Metal Mineral 树形DP
    poj 1986 Distance Queries LCA
    poj 1470 Closest Common Ancestors LCA
    poj 1330 Nearest Common Ancestors LCA
    hdu 3046 Pleasant sheep and big big wolf 最小割
    poj 3281 Dining 最大流
    zoj 2760 How Many Shortest Path 最大流
  • 原文地址:https://www.cnblogs.com/liyuspace/p/7596198.html
Copyright © 2011-2022 走看看