HTML实现页面主动跳转的五种办法
发布时间:09/01 来源:未知 浏览:
关键词:
在上篇文章给大家介绍了HTML页面3秒后主动跳转的三种常见办法,本文连续给大家介绍有关html页面跳转相关知识,一起学习吧。
下面列了五个例子来具体说明,这几个例子的主要功效是:在5秒后,主动跳转到同名目下的hello.html(按照本人需要自行修改)文件。
1)html的实现
复制代码
代码如下:
<head> <meta http-equiv="refresh" content="5;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实现页面主动跳转的五种办法的具体内容,更多请关注百分百源码网其它相关文章!