您的位置：首页 > Web前端 > HTML

HTML页面跳转（重定向）的五种方法

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

 

[html] view
plaincopyprint?

<head>  

<!-- 以下方式只是刷新不跳转到其他页面 -->  

<meta http-equiv="refresh" content="10">  

<!-- 以下方式定时转到其他页面 -->  

<meta http-equiv="refresh" content="5;url=hello.html">   

</head>  

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

 

2) javascript的实现

 

[javascript] view
plaincopyprint?

<script language="javascript" type="text/javascript">   

// 以下方式直接跳转  

window.location.href='hello.html';  

// 以下方式定时跳转  

setTimeout("javascript:location.href='hello.html'", 5000);   

</script>  

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

 

[html] view
plaincopyprint?

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

[javascript] view
plaincopyprint?

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

[html] view
plaincopyprint?

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

[html] view
plaincopyprint?

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

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html html5 dom
相关文章推荐
新的分享
章节导航