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

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

1）html的实现

复制代码

代码如下:

 head  meta http-equiv= refresh content= url=hello.html  /head 

优点：简单

缺点：Struts Tiles中无法使用

2）javascript的实现

复制代码

代码如下:

 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）

复制代码

代码如下:

 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）

复制代码

代码如下:

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

复制代码

代码如下:

 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 ）

复制代码

代码如下:

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

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。