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

作者:Tigh     发布于「网站相关 / 网站相关」 - 猫雅博客

2017-03-19 分类:网站相关 / 网站相关 阅读(130) 评论(0) 百度已收录
当前位置:猫雅博客 > 网站相关 > 正文
赞(0) 打赏

作者:Tigh

站长QQ1165500646

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

本文通过五个实例给大家介绍html实现页面自动跳转的五种方法,对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、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实现页面自动跳转的五种方法,希望大家喜欢。

分享到:
未经允许不得转载:

作者:Tigh, 转载或复制请以 超链接形式 并注明出处 猫雅博客
原文地址:《HTML实现页面自动跳转的五种方法》 发布于2017-03-19

评论 抢沙发

5 + 1 =


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

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

这绝对不是广告!

灌水说明

由于评论过多,垃圾评论日益严重,决定开始封禁不正常评论,我分享资源不欠谁,所以对于抱着敷衍不正常的评论者,很抱歉啦,本站不对你开放。

封禁列表
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册