转自:http://blog.sina.com.cn/s/blog_546f2daa0100pxic.html
下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件。
1) html的实现
<head>
<!-- 以下方式只是刷新不跳转到其他页面 -->
<meta http-equiv="refresh" content="10">
<!-- 以下方式定时转到其他页面 -->
<meta http-equiv="refresh" content="5;url=hello.html">
</head>
2) javascript的实现
<script language="javascript" type="text/javascript">
// 以下方式直接跳转
window.location.href='hello.html';
// 以下方式定时跳转
setTimeout("javascript:location.href='hello.html'", 5000);
</script>
优点:灵活,可以结合更多的其他功能
缺点:受到不同浏览器的影响
3) 结合了倒数的javascript实现(IE)
<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属性)
Fixfox
<script language="javascript" type="text/javascript">
var second = document.getElementByIdx_x('totalSecond').textContent;
setInterval("redirect()", 1000);
function redirect()
{
document.getElementByIdx_x('totalSecond').textContent = --second;
if (second < 0) location.href = 'hello.html';
}
</script>
4) 解决Firefox不支持innerText的问题
<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript">
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementByIdx_x('totalSecond').innerText = "my text innerText";
} else{
document.getElementByIdx_x('totalSecond').textContent = "my text textContent";
}
</script>
5)整合
<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript">
var second = document.getElementByIdx_x('totalSecond').textContent;
if (navigator.appName.indexOf("Explorer") > -1) {
second = document.getElementByIdx_x('totalSecond').innerText;
} else {
second = document.getElementByIdx_x('totalSecond').textContent;
}
setInterval("redirect()", 1000);
function redirect() {
if (second < 0) {
location.href = 'hello.html';
} else {
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementByIdx_x('totalSecond').innerText = second--;
} else {
document.getElementByIdx_x('totalSecond').textContent = second--;
}
}
}
</script>
分享到:
相关推荐
HTML页面跳转的方法HTML页面跳转的5种方法 下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件。 html的实现
html5+APP一些常用的html5+plus函数封装、mui+APP常用的处理函数封装、页面跳转、页面关闭、页面刷新、页面支付
html5 css3圆形进度条倒计时页面跳转代码
html网页页面内跳转html网页页面内跳转html网页页面内跳转html网页页面内跳转html网页页面内跳转html网页页面内跳转
主要介绍了静态页面html中跳转传值的JS处理技巧,结合实例形式分析了HTML页面跳转通过URL传递参数的方法与javascript处理技巧,具有一定参考借鉴价值,需要的朋友可以参考下
页面跳转的动画效果
一个超炫酷的跳转页面 HTML一个超炫酷的跳转页面 HTML 一个超炫酷的跳转页面 HTML 一个超炫酷的跳转页面 HTML 一个超炫酷的跳转页面 HTML
html页面跳转传递参数Demo
js所有的跳转方法详解
java五种jsp页面跳转方法详解 2009-08-21 09:06 1. RequestDispatcher.forward() 是在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servlet or JSP到 另外一个Servlet,JSP 或普通HTML...
html页面锚点跳转
HTML页面跳转的5种方法 1. html的实现 2.javascript的实现
html5 css3圆形进度条倒计时页面跳转代码
就想弄一个winform结合html5的一个小东西,突有心血来潮,想在里面嵌套一个微信网页版,下面小编给大家介绍下HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法,一起看看吧
本文通过五个实例给大家介绍html实现页面自动跳转的五种方法,对html页面跳转相关知识感兴趣的朋友一起学习吧
html页面跳转大全.pdf
jsp_html_web_实现页面跳转jsp_html_web_实现页面跳转
密码访问单页自定义跳转页面,修改了的密码访问单页,添加了js自定义密码跳转页面。需要正确输入密码才能跳转目标网址
页面跳转动画大全,翻页,旋转,翻转等各种动画实现源码
使用session存储,确定用户是否登录,从而确定页面跳转至哪个页面。 判断本地有无customerID: function jumpTo(p, url) { var customerId=sessionStorage.customerId; if (customerId == undefined) { p.attr(...