下面列了五个例子来详细说明，这几个例子的主要功能是：在5秒后，自动跳转到同目录下的hello.html（根据自己需要自行修改）文件。

1) html的实现

<head>

<!-- 以下方式只是刷新不跳转到其他页面 -->

<meta http-equiv="refresh" content="10">

<!-- 以下方式定时转到其他页面 -->

<meta http-equiv="refresh" content="5;url=hello.html">

</head>

优点：简单
缺点：Struts Tiles中无法使用

2-1) javascript的实现[location.href]

<script language="javascript" type="text/javascript">

// 以下方式直接跳转

window.location.href='hello.html';

// 以下方式定时跳转

setTimeout("javascript:location.href='hello.html'", 5000);

</script>

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

优点：灵活，可以结合更多的其他功能
缺点：受到不同浏览器的影响

2-2) 结合了倒数的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>

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

优点：更人性化
缺点：firefox不支持（firefox不支持span、div等的innerText属性）

2-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>

2-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>

2-5) 兼容IE和FF的带有倒数的跳转

<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页面跳转的5种方式的更多相关文章

  1. js实现页面跳转的两种方式

      CreateTime--2017年8月24日08:13:52Author:Marydon js实现页面跳转的两种方式 方式一: window.location.href = url 说明:我们常用 ...

  2. web页面跳转的几种方式

    可用客户端触发或服务端触发的方式来实现页面跳转. 客户端触发 方式一:使用Javascript 利用window.location对象的href属性.assign()方法或replace()方法来实现 ...

  3. 微信小程序页面跳转 的几种方式

    最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式 一.wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:“保留当前页面,跳转到应用内的某个页面” 类 ...

  4. php实现页面跳转的几种方式

    PHP中实现页面跳转有一下几种方式,看了几个人写的不是很条理,自己整理一下 在PHP脚本代码中实现 <?php header("location:url地址") ?> ...

  5. PHP 页面跳转的三种方式

    第一种方式:header() header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. 语法: void header ( string $string [, bool $re ...

  6. web项目中实现页面跳转的两种方式

    <a href="javascript:"></a>跳转在网页本身,URL不改变 <a href="#"></a> ...

  7. 微信小程序页面跳转的三种方式总结

    原文链接 https://blog.csdn.net/zgmu/article/details/72123329 首先我们了解到,小程序规定页面路径只能有五层,所以我们尽量避免多层级的页面跳转 页面跳 ...

  8. Vue路由实现页面跳转的两种方式（router-link和JS）

    Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用 1.通过 <router-link> 实现 <router-link> 组件用于设置一 ...

  9. Servlet页面跳转的两种方式

    一.页面跳转 1. 请求转发: (1) 使用requestDispatcher对象: 转发格式:request.getRequestDispatcher("path").forwa ...

  10. Javascript实现页面跳转的几种方式

    概述 相信很多Web开发者都知道,在开发Web程序的时候,对于页面之间的跳转,有很多种,但是有效的跳转则事半功倍,下面就是我在平时的开发过程中所用到的一些JavaScript跳转方式,拿出和大家共享一 ...

随机推荐

  1. PrefixSpan

    http://www.codesoso.net/Search?q=prefixspan

  2. C#交换两个变量值的多种写法

    在学习.Net/C#或者任何一门面向对象语言的初期,大家都写过交换两个变量值,通常是通过临时变量来实现.本篇使用多种方式实现两个变量值的交换. 假设int x =1; int y = 2;现在交换两个 ...

  3. AutoMapper在MVC中的运用01-配置、使用、单元测试、举例

    MVC中,如果想在Domain Model和View Model之间建立映射,用AutoMapper是一个不错的选择.不仅如此,AutoMapper能在不同对象之间建立映射,比如string与int类 ...

  4. OLE文件拖放

    使用IDropTarget接口同时支持文本和文件拖放 关于Windows的外壳扩展编程,拖放是比较简单的一种,在网上可以找到不少介绍这个技巧的文章.大部分是介绍使用MFC的COleDropTarget ...

  5. android4.0 中关于内外置sd卡的获取及读写权限问题

    from://http://blog.chinaunix.net/uid-26727976-id-3146895.html 在2.x的版本中,在manifest中配置的权限android.permis ...

  6. Linux学习17-gitlab访问慢502问题优化

    前言 浏览器访问gitlab的web页面,发现非常慢,并且很容易出现502问题.其中一个原因就是8080端口被tomcat占用,前面一篇已经更换了端口,但还是很慢. 后来搜了下,原因是gitlab占用 ...

  7. 转换java keytools的keystore证书到OPENSSL的PEM格式文件

    背景:原先业务使用的前端为haproxy,直接端口转发至tomcat,后端进行ssl连接,所以当时生成的步骤如下 ? 1 2 •生成密钥对:keytool -genkey -alias tomcat- ...

  8. java List集合记录 ArrayList和LinkedList的区别

    一般大家都知道ArrayList和LinkedList的大致区别:      1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构.      2.对于随机访问 ...

  9. Android手机提示“未安装应用程序”

    用eclipse调试应用时,遇到了这个问题,网上给出的解决方案倒是挺多,但似乎一个都没奏效,而且我手机也重启了,还是有问题,郁闷ing-   然后看到一篇文章指出,可能不是签名和SD的卡问题,而是我们 ...

  10. [Web 前端] 解决因inline-block元素导致的空白间距和元素下沉

    cp from : https://www.jianshu.com/p/617e78a27c88 ** 前言: ** CSS 中的 display:inline-block 是笔者最为喜欢的元素之一, ...