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

    [root@li739-39 ~]# lastlogUsername Port From Latestroot pts/1 183.15.253.245 Thu Oct 29 05:57:29 +00 ...

  2. Oracle 备份、恢复单表或多表数据步骤

    Oracle 备份.恢复单表或多表数据步骤,适用于 Oracle 8.9.10.        *备份单表或多表数据: exp user/password@server file=filefullpa ...

  3. Android之用自定义的shape去实现shadow效果

    直接上xml文件, 并且附上相应的解析: <?xml version="1.0" encoding="utf-8"?> <selector x ...

  4. Struts2再曝高危漏洞(S2-020补丁绕过)

    之前S2-020漏洞利用方式见drops:Struts2 Tomcat class.classLoader.resources.dirContext.docBase赋值造成的DoS及远程代码运行利用! ...

  5. nginx 代理ssh

    events { worker_connections 1024; } stream { #stream模块,就跟http模块一样 upstream ssh { server 127.0.0.1:22 ...

  6. 安卓开发环境配置及HelloWorld

    一:JAVA 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 1.1 ...

  7. 空间金字塔池化（Spatial Pyramid Pooling，SPP）

    基于空间金字塔池化的卷积神经网络物体检测 原文地址:http://blog.csdn.net/hjimce/article/details/50187655 作者:hjimce 一.相关理论 本篇博文 ...

  8. 用Eclipse开发Androd应用程序时，自带虚机模拟器太慢了，怎么办

    问:用Eclipse开发Androd应用程序时,系统自带模拟器太慢了,怎么办? 答:用Genymotin

  9. SQL Script for select data from ebs and make a csv file to FTP

    DECLARE CURSOR cur_lcy_test IS SELECT rcta.customer_trx_id, rcta.trx_number, rcta.trx_date FROM ra_c ...

  10. [置顶] 不刷机让越狱后的iphone恢复出厂设置

    iphone越狱后,设置里的清除所有内容和设置选项是不生效的,选上之后菊花转个不停,只能强制退出,还有白苹果的危险. 若想恢复出厂设置有两个办法: 一.刷机 最直接的办法,我觉得itunes配合ito ...