下面列了五个例子来详细说明，这几个例子的主要功能是：在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的问题

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>

5) 整合3)和3')

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>

meta标签和JS实现页面刷新与重定向的更多相关文章

  1. js中页面刷新和页面跳转的方法总结

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

  2. js中页面刷新和页面跳转的方法总结 [ 转自欢醉同学 ]

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

  3. js当前页面刷新并且清空文本内容的方法

    js当前页面刷新并且清空文本内容的方法: 1.js代码:location.reload(); 2.html:<body onload="document.forms[0].reset( ...

  4. 实现网页页面跳转的几种方法(meta标签、js实现、php实现)

    1.meta标签实现 只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面  代码如下 复制代码 1 <meta http-equiv="refresh&quo ...

  5. 实现网页页面跳转的几种方法大全(meta标签、js实现、php实现)

    1.meta标签实现 只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面  代码如下 复制代码 1 <meta http-equiv="refresh&quo ...

  6. JS实现页面刷新方法

    下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象(用于框架) opener.loc ...

  7. 用js判断页面刷新或关闭的方法

    Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定.区别在于on ...

  8. jQuery、js全页面刷新方法

    下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象(用于框架) opener.loc ...

  9. JS 控制页面刷新

    .页面自动刷新:把如下代码加入<head>区域中 <meta http-equiv=">,其中20指每隔20秒刷新一次页面. .页面自动跳转:把如下代码加入<h ...

随机推荐

  1. JVM笔记(二) 垃圾收集器(1)

    垃圾收集器 主要通过阅读<深入了解Java虚拟机>(周志明 著)和网络资源汇集而成,为本人学习JVM的笔记.同时,本文理论基于JDK 1.7版本,暂不考虑 1.8和1.9 的新特性,但可能 ...

  2. oracle 产生一个任意大小的随机数

    SELECT DBMS_RANDOM.RANDOM FROM DUAL;          产生一个任意大小的随机数 SELECT ABS(MOD(DBMS_RANDOM.RANDOM,100)) F ...

  3. php中的curl的一些参数总结

    curl可以根据是否是http或则是https选择加密发送的内容: 使用curl发送请求的基本流程 1,初始化连接句柄: 2,设置curl选项: 3,执行并获取结果: 4,释放curl连接句柄: 例子 ...

  4. UVALive 5846 计数

    DES:给出任意两点之间连线的颜色.问一共会有多少个由相同颜色的边组成的三角形. 一共有C(3, n)个三角形.考虑一每个点为顶点的三角形.颜色不同的两条边组成的三角形一定不行.所以减去. 题目链接: ...

  5. URAL 1941

    比赛的时候三个点没有优化成功.其实也没有想到哈希成数.然后就变成了只要一个长度和scary相等的区间内所有数字个数都是相等的.那么就是符合题意的.于是.为了不TLE我们不能对txt每个位置遍历 的同时 ...

  6. httpclient 使用代理

    httpclient_使用代理 当爬取网页的时候,有的目标站点有反爬虫机制,对于频繁访问站点以及规则性访问站点的行为,会采用屏蔽IP的措施. 这时候代理IP就派上用场了. 代理的分类 透明代理 匿名代 ...

  7. poj 1163 The Triangle 搜索 难度:0

    The Triangle Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 37931   Accepted: 22779 De ...

  8. html <meta>设置自动刷新或者几秒内跳转到指定页面

    指定时间自动刷新: <meta http-equiv="refresh" content="2"/> 指定时间跳转到指定页面: <meta h ...

  9. .Net Entity Framework Core 用 HasColumnType 配置浮点数精度

    一.前言 前段时间用.Net Entity Framework core搭建框架,需要配置浮点数的精度,发现.Net Entity Framework core 并没有HasPrecision方法.在 ...

  10. HDU 3488

    http://acm.hdu.edu.cn/showproblem.php?pid=3488 原来写过的一道题,今天重新看费用流又做了一遍 题意:给一个图,求环的并(权值和最小) 思路:每个点只能走一 ...