2022-06-21 11:44:15 版本 : HTML实现页面自动跳转的五种方法-木庄网络博客
作者: 周杨 于 2022年06月21日 发布在分类 / 计算机应用 / 编程 下,并于 2022年06月21日 编辑
 历史版本

备注 修改日期 修改人
CREAT 2022-06-21 11:44:15[当前版本] 系统管理员


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

1)html的实现

复制代码

代码如下:

1

2

3

<head>

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

</head>

优点:简单

缺点:Struts Tiles中无法使用

2)javascript的实现

复制代码

代码如下:

1

2

3

<mce:script language="javascript"type="text/javascript"><!--

setTimeout("javascript:location.href='http://liting6680.blog.163.com/blog/hello.html'", 5000);

// --></mce:script>

优点:灵活,可以结合更多的其他功能

缺点:受到不同浏览器的影响

3)结合了倒数的javascript实现(IE)

复制代码

代码如下:

1

2

3

4

5

6

7

8

9

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

<mce:script language="javascript"type="text/javascript"><!--

varsecond = totalSecond.innerText;

setInterval("redirect()", 1000);

functionredirect(){

totalSecond.innerText=--second;

if(second<0) location.href='http://liting6680.blog.163.com/blog/hello.html';

}

// --></mce:script>

优点:更人性化

缺点:firefox不支持(firefox不支持span、p等的innerText属性)

3 )结合了倒数的javascript实现(firefox)

复制代码

代码如下:

1

2

3

4

5

6

7

8

9

<mce:script language="javascript"type="text/javascript"><!--

varsecond = document.getElementById('totalSecond').textContent;

setInterval("redirect()", 1000);

functionredirect()

{

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

if(second < 0) location.href='http://liting6680.blog.163.com/blog/hello.html';

}

// --></mce:script>

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

复制代码

代码如下:

1

2

3

4

5

6

7

8

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

<mce: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";

}

// --></mce:script>

5)整合3)和3')

复制代码

代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

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

<mce:script language="javascript"type="text/javascript"><!--

varsecond = document.getElementById('totalSecond').textContent;

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

{

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

}else

{

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

}

setInterval("redirect()", 1000);

functionredirect()

{

if(second < 0)

{

location.href='http://liting6680.blog.163.com/blog/hello.html';

}else

{

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

{

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

}else

{

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

}

}

}

// --></mce:script>



历史版本-目录  [回到顶端]
    知识分享平台 -V 5.1.4 -大信谛威