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

最新推荐文章于 2023-02-19 23:09:50 发布

ygc2022

最新推荐文章于 2023-02-19 23:09:50 发布

阅读量1k

点赞数

分类专栏： 18) DIV+CSS浏览器兼容文章标签： html javascript redirect firefox function struts

本文链接：https://blog.csdn.net/YoungerChen/article/details/5968592

版权

18) DIV+CSS浏览器兼容专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

1）html的实现

view plain copy to clipboard print ?

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

优点：简单

缺点：Struts Tiles中无法使用

2）javascript的实现

view plain copy to clipboard print ?

< mce:script language = "javascript" type = "text/javascript" > <!--
setTimeout("javascript:location.href = 'http://liting6680.blog.163.com/blog/hello.html' ", 5000);
// --> </ mce:script >

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

优点：灵活，可以结合更多的其他功能

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

3）结合了倒数的javascript实现（IE）

view plain copy to clipboard print ?

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

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

优点：更人性化

缺点：firefox不支持（firefox不支持span、div等的innerText属性）

3 ' ）结合了倒数的javascript实现（firefox）

view plain copy to clipboard print ?

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

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

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

view plain copy to clipboard print ?

5
<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 <mce:script language="javascript" type="text/javascript"></mce:script>

5）整合3）和3'）

view plain copy to clipboard print ?