HTML实现页面自动跳转的五种方法
在上篇文章给大家介绍了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(second0) location.href='http://liting6680.blog.163.com/blog/hello.html';
}
// -->
/mce:script>
优点:更人性化
缺点:firefox不支持(firefox不支持span、div等的innerText属性)
3 )结合了倒数的javascript实现(firefox)
复制代码代码如下:@H_512_98@
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实现页面自动跳转的五种方法,希望大家喜欢。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: HTML实现页面自动跳转的五种方法
本文地址: https://pptw.com/jishu/588227.html