下面列了五个例子来详细说明，这几个例子的主要功能是：在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. 对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(3)

    chsakell分享了一个前端使用AngularJS,后端使用ASP.NET Web API的项目. 源码: https://github.com/chsakell/spa-webapi-angula ...

  2. Visual Studio 2013 sqlce 配置（转）

    Visual Studio 2013 把內建 SQL CE 的管理工具拿掉了 下载SQL Server Compact Toolbox by ErikEJ并安装 打开VS2013,新建一工程,在“视图 ...

  3. 使用jQuery实现图片懒加载原理

    原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用 ...

  4. CATransition 实践

    时间差不够,导致闪屏 CATransition *animation = [CATransition animation]; animation.delegate = self; animation. ...

  5. 【python】python安装tensorflow报错：python No matching distribution found for tensorflow==1.12.0

    python安装tensorflow报错:python No matching distribution found for tensorflow==1.12.0 python版本是3.7.2 要安装 ...

  6. 看书小记6（《C专家编程》）

    typedef不常见但值得一提的用途: 1. 用typedef来定义与平台无关的类型. 比方定义一个叫 REAL 的浮点类型.在目标平台一上.让它表示最高精度的类型为: typedef long do ...

  7. Unity声音-音源组件

    音源组件(AudioSource) 音源是场景中在某个位置的发声装置,好像一个喇叭.它播放着音频片段 (Audio Clip). 发出的声音将输出到声音监听器(audio listener),或者声音 ...

  8. Linux为sh脚本文件添加执行权限

    chmod是权限管理命令change the permissions mode of a file的缩写..u代表所有者,x代表执行权限. + 表示增加权限.chmod u+x file.sh 就表示 ...

  9. .Net Standard Http请求实例

    一 ..Net Standard http协议封装 程序集: System.Net.Http.dll 命名 空间:System.Net.Http HttpClient :http请求 发送类 Form ...

  10. 请求被中止: 未能创建 SSL/TLS 安全通道，设置 TLSv1.2和TLSv1.1版本 .基础链接已经关闭,发送时发生错误

    WSO2 API访问的安全要求, 只能提供TLSv1.2和TLSv1.1版本,其它SSL版本协议因为存在较高安全漏洞问题会被disable. A 改成TLSv1.1或TLSv1.2,最好使用TLSv1 ...