HTML页面跳转的5种方法
下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件。
1) html的实现
?
1 2 3 4 5 6 | < head > <!-- 以下方式只是刷新不跳转到其他页面 --> < meta http-equiv="refresh" content="10"> <!-- 以下方式定时转到其他页面 --> < meta http-equiv="refresh" content="5;url=hello.html"> </ head > |
优点:简单
缺点:Struts Tiles中无法使用
2) javascript的实现
?
1 2 3 4 5 6 | <script language= "javascript" type= "text/javascript" > // 以下方式直接跳转 window.location.href= 'hello.html' ; // 以下方式定时跳转 setTimeout( "javascript:location.href='hello.html'" , 5000); </script> |
优点:灵活,可以结合更多的其他功能
缺点:受到不同浏览器的影响
3) 结合了倒数的javascript实现(IE)
?
1 2 3 4 5 6 7 8 9 | < span id="totalSecond">5</ span > < script language="javascript" type="text/javascript"> var second = totalSecond.innerText; setInterval("redirect()", 1000); function redirect(){ totalSecond.innerText=--second; if(second< 0 ) location.href='hello.html'; } </script> |
优点:更人性化
缺点:firefox不支持(firefox不支持span、div等的innerText属性)
3') 结合了倒数的javascript实现(firefox)
?
1 2 3 4 5 6 7 8 9 | <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 = 'hello.html' ; } </script> |
4) 解决Firefox不支持innerText的问题
?
5) 整合3)和3')
1 2 3 4 5 6 7 8 | < span id="totalSecond">5</ span > < 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"; } </ script > |
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | < span id="totalSecond">5</ span > < 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 = 'hello.html'; } else {
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('totalSecond').innerText = second--;
} else {
document.getElementById('totalSecond').textContent = second--;
} } } </ script > |
分类: HTML/CSS,JAVASCRIPT
好文要顶
关注我
收藏该文
michael_lee
关注 - 0
粉丝 - 18
关注 - 0
粉丝 - 18
+加关注
11
0
最多200字,当前共字
« 上一篇:以后定居博客园了
» 下一篇:狐狸可弃,虫子不可弃
» 下一篇:狐狸可弃,虫子不可弃
posted @ 2010-11-24 17:25 michael_lee 阅读(461416) 评论(0) 编辑 收藏
优质内容筛选与推荐>>
1、C语言程序设计100例之(23):数列求和
2、错误列表
3、【BZOJ4026】dC Loves Number Theory 分解质因数+主席树
4、访问svc 文件,编译器错误消息: CS0016,未能写入输出文件
5、MYSQL之视图、触发器、事务
1、C语言程序设计100例之(23):数列求和
2、错误列表
3、【BZOJ4026】dC Loves Number Theory 分解质因数+主席树
4、访问svc 文件,编译器错误消息: CS0016,未能写入输出文件
5、MYSQL之视图、触发器、事务
长按二维码向我转账
受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。
已推荐到看一看
和朋友分享想法
最多200字,当前共字
发送
已发送
朋友将在看一看看到
确定
分享你的想法...
取消
分享想法到看一看
确定发送中
网络异常,请稍后重试
微信扫一扫
关注该公众号