HTML页面跳转的5种方法

最新推荐文章于 2020-06-03 07:53:45 发布

唔系小老虎

最新推荐文章于 2020-06-03 07:53:45 发布

阅读量4.9k

点赞数 4

分类专栏：前端开发文章标签： html redirect javascript firefox function struts

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

 
    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的实现

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

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

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

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

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

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

 
    1<span id="totalSecond">5</span>
 
    2<script language="javascript" type="text/javascript"> 
 
    3if(navigator.appName.indexOf("Explorer") > -1){ 
 
    4document.getElementById('totalSecond').innerText = "my text innerText"; 
 
    5} else{ 
 
    6document.getElementById('totalSecond').textContent = "my text textContent"; 
 
    7} 
 
    8</script>

5) 整合3)和3')

 
    01<span id="totalSecond">5</span>
 
    02 
 
    03<script language="javascript" type="text/javascript"> 
 
    04var second = document.getElementById('totalSecond').textContent; 
 
    05 
 
    06if (navigator.appName.indexOf("Explorer") > -1)  { 
 
    07    second = document.getElementById('totalSecond').innerText; 
 
    08} else { 
 
    09    second = document.getElementById('totalSecond').textContent; 
 
    10} 
 
    11 
 
    12setInterval("redirect()", 1000); 
 
    13function redirect() { 
 
    14if (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>