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

本文通过五个实例给大家介绍html实现页面自动跳转的五种方法,对html页面跳转相关知识感兴趣的朋友一起学习吧
下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的url.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、div等的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实现页面自动跳转的五种方法
除非注明,文章均为 《博客之家》 原创
转载请注明本文短网址:http://bk.likinming.com/post-918.html  [生成短网址]

日期:2017年12月06日 星期三   分类:好文分享   浏览(207)

留言/评论:◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

填写好QQ号码,任点空白处自动获取

昵称

邮箱

网址

网站提交

  • 名称:
  • 网址:
Copyright © 2012 - 2017 by 李明关于本站免责声明本站下载站点地图sitemap广告联系