HTML实现页面自动跳转的五种方法


本文摘自PHP中文网,作者不言,侵删。

这篇文章主要介绍了关于HTML实现页面自动跳转的五种方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

在上篇文章给大家介绍了HTML页面3秒后自动跳转的三种常见方法,本文继续给大家介绍有关html页面跳转相关知识,一起学习吧。
下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件。

1)html的实现

复制代码

代码如下:

1

2

3

<head

<meta http-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"><!-- 

var second = totalSecond.innerText; 

setInterval("redirect()", 1000); 

function redirect(){ 

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

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

setInterval("redirect()", 1000); 

function redirect() 

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

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

以上通过五个实例是给大家介绍了HTML实现页面自动跳转的五种方法,希望大家喜欢。

以上就是HTML实现页面自动跳转的五种方法的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html怎么设置文本框边框颜色

Html文档中怎么把图片作为背景?

es6删除数组元素或者对象元素的方法介绍(代码)

如何查看Html文件的代码?

Html如何实现网页跳转

Html格式是什么

Html的textarea怎么保存格式

Html中select的各种用法总结(代码)

Html字体颜色如何设置

Html font标签怎么用

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...