HTML页面定时跳转方法
1）html的实现
<head>
<meta http-equiv="refresh" content="5;url=hello.html">
</head>
优点：简单
缺点：Struts Tiles中无法使用
2）javascript的实现
<script language="javascript" type="text/javascript">
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属性）
3'）结合了倒数的javascript实现（firefox）
<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的问题
<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>
5）整合3）和3'）
<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>
本文摘自:http://blog.163.com/ai_zxc/blog/static/4621272010059380438/
我实验了 “5）整合3）和3'）” 如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD> <BODY>
<span id="totalSecond">5</span>
</BODY> <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://www.baidu.com/';
} else
{
if (navigator.appName.indexOf("Explorer") > -1)
{
document.getElementById('totalSecond').innerText = second--;
} else
{
document.getElementById('totalSecond').textContent = second--;
}
}
}
</script>
</HTML>
HTML页面定时跳转方法的更多相关文章
- [javascript]各种页面定时跳转(倒计时跳转)代码总结
(1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内) <script type="text/javascript"> //3秒钟之后跳转到指定 ...
- C#中页面之间跳转方法比较
一直以来,各种跳转方法混用,浑浑噩噩没有仔细去了解过每个跳转方法的区别 1.<a herf="default.asp"></a> 超链接跳转 2.< ...
- PHP页面之间跳转方法总结
编程中,在页面之间进行跳转是必须的.这里列出了三种办法,供参考. 一.用HTTP头信息 也就是用PHP的HEADER函数.PHP里的HEADER函数的作用就是向浏览器发出由HTTP协议规定的本来应该通 ...
- [转]Jquery实现页面定时跳转
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript访问ab页面定时跳转代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS定时刷新页面及跳转页面
JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...
- response对象处理HTTP文件头（禁用缓存、设置页面自动刷新、定时跳转网页）
response对象处理HTTP文件头 制作人:全心全意 禁用缓存 在默认情况下,浏览器将会对显示的网页内容进行缓存.这样,当用户再次访问相关网页时,浏览器会判断网页是否有变化,如果没有变化则直接显示 ...
- form表单action提交表单，页面不跳转且表单数据含文件的处理方法
在最近的项目中需要将含 input[type='file']的表单提交给后台 ,并且后台需要将文件存储在数据库中.之前所用的方法都是先将文件上传到七牛服务器上,然后七牛会返回文件的下载地址,在提交表单 ...
- PHP中常见的页面跳转方法
转载自冠威博客 [ http://www.guanwei.org/ ]本文链接地址:http://www.guanwei.org/post/PHPnotes/04/php-redirect-metho ...
随机推荐
- redis的备份
了解redis的朋友应该知道它有两种数据持久化的方式,这里我作一个简单的介绍,AOF(append only file)和RDB. 1.RDB 这是一种比较常见的方式,采用 写时复制 的方式,效率高 ...
- 基于HTML5技术的电力3D监控应用（四）
回答了知乎问题较长,一些使用WebGL的经验,作为新的一篇: 正好逛到这个问题,正好是2013年底,正好最近基于的HT for Web 3D做的电力项目收尾,正好用到的就是WebGL技术,因此说说自己 ...
- SQL Server技术问题之游标优缺点
分类: MS SQL SERVER 支持三种类型的游标:Transact_SQL 游标,API 服务器游标和客户游标. (1) Transact_SQL 游标 Transact_SQL 游标是由DEC ...
- IOS开发UI基础之UIButton
什么是按钮?
- [Solution] AOP原理解析及Castle、Autofac、Unity框架使用
本节目录: AOP介绍 AOP基本原理 AOP框架 Castle Core Castle Windsor Autofac Unity AOP介绍 面向切面编程(Aspect Oriented Prog ...
- 复利程序(c语言)（张俊毅 周修文）
因为之前发烧一直没有了解这个 所以最近才补上 分数扣了就扣了 补上先 单元测试迟点更 #include<stdio.h> #include <math.h> #include ...
- PHP的加密解密字符串函数
程序中经常使用的PHP加密解密字符串函数 代码如下: /********************************************************************* 函数 ...
- 重新想象 Windows 8 Store Apps (34) - 通知: Toast Demo, Tile Demo, Badge Demo
[源码下载] 重新想象 Windows 8 Store Apps (34) - 通知: Toast Demo, Tile Demo, Badge Demo 作者:webabcd 介绍重新想象 Wind ...
- jdk1.8 J.U.C之FutureTask实现机制分析
我画了一张关于FutureTask的类图,主要包括FutureTask的几个重要的函数和字段,还有它和父类的关系. 根据上面图我们可以清晰的看出FutureTask的继承关系.FutureTask继承 ...
- Design Patterns （简单工厂模式）
文章很长很精彩,如是初学请耐心观看.(大神请绕道!) 简单工厂模式: 1.创建型模式 2.简单工厂模式概述 3.简单工厂模式的结构与实现 4.简单工厂模式的应用实例 5.创建对象与使用对象 6.简单工 ...