HTML页面跳转的五种方式

最新推荐文章于 2025-07-04 15:40:23 发布

转载最新推荐文章于 2025-07-04 15:40:23 发布 · 2.6k 阅读

文章标签：

#html #redirect #javascript #firefox #function #struts

J2EE 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何在网页上实现自动跳转的功能，包括HTML、JavaScript等多种方法，以及各自的优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面列了五个例子来详细说明，这几个例子的主要功能是：在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
//
 以下方式直接跳转

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

4
//
 以下方式定时跳转

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

6
</script>

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

1
<span id="totalSecond">5</span>

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

3
var
 second = totalSecond.innerText;

4
setInterval("redirect()",
 1000);

5
function
 redirect(){

6
totalSecond.innerText=--second;

7
if(second<0) location.href='hello.html';

8
}

9
</script>

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

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

2
var second
 = document.getElementById('totalSecond').textContent;

3
setInterval("redirect()",
 1000);

4
function redirect()

5
{

6
document.getElementById('totalSecond').textContent
 = --second;

7
if (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">

3
if(navigator.appName.indexOf("Explorer")
 > -1){

4
document.getElementById('totalSecond').innerText
 = "my text innerText";

5
}
 else{

6
document.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">

04
var
 second = document.getElementById('totalSecond').textContent;

05
 
06
if
 (navigator.appName.indexOf("Explorer") > -1)  {

07
    second
 = document.getElementById('totalSecond').innerText;

08
}
 else {

09
    second
 = document.getElementById('totalSecond').textContent;

10
}

11
 
12
setInterval("redirect()",
 1000);

13
function
 redirect() {

14
if
 (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>