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

1）html的实现

复制代码

代码如下:

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

优点：简单

缺点：Struts Tiles中无法使用

2）javascript的实现

复制代码

代码如下:

<mce:script language="javascript" type="text/javascript"><!--  setTimeout("javascript:location.href='http://liting6680.blog.163.com/blog/hello.html'", 5000);  // --></mce:script> 

优点：灵活，可以结合更多的其他功能

缺点：受到不同浏览器的影响

3）结合了倒数的javascript实现（IE）

复制代码

代码如下:

<span id="totalSecond">5</span>  <mce:script language="javascript" type="text/javascript"><!--  var second = totalSecond.innerText;  setInterval("redirect()", 1000);  function redirect(){  totalSecond.innerText=--second;  if(second<0) location.href='http://liting6680.blog.163.com/blog/hello.html';  }  // --></mce:script> 

优点：更人性化

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

3 ）结合了倒数的javascript实现（firefox）

复制代码

代码如下:

<mce: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='http://liting6680.blog.163.com/blog/hello.html';  }  // --></mce:script> 

4）解决Firefox不支持innerText的问题

复制代码

代码如下:

<span id="totalSecond">5</span>  <mce: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";  }  // --></mce:script> 

5）整合3）和3'）

复制代码

代码如下:

<span id="totalSecond">5</span>  <mce: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://liting6680.blog.163.com/blog/hello.html';  } else  {  if (navigator.appName.indexOf("Explorer") > -1)  {  document.getElementById('totalSecond').innerText = second--;  } else  {  document.getElementById('totalSecond').textContent = second--;  }  }  }  // --></mce:script> 

以上通过五个实例是给大家介绍了HTML实现页面自动跳转的五种方法，希望大家喜欢。

HTML实现页面自动跳转的五种方法的更多相关文章

  1. HTML 页面跳转的五种方法

    H方法TML 页面跳转的五种方法 下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件.1) html的实现 <he ...

  2. 页面自动执行js的3种方法

    1.最简单的调用方式,直接写到html的body标签里面:   <html> <body onload="load();"> </body> & ...

  3. HTML页面自动跳转，windows操作

    1) html的实现 <head> <!-- 以下方式只是刷新不跳转到其他页面 --> <meta http-equiv="refresh" cont ...

  4. JAVA-JSP内置对象之response对象实现页面自动跳转

    相关资料:<21天学通Java Web开发> response对象 实现页面自动跳转1.可以通过response对象的addHeader()方法添加一个标题为Refresh的标头,并指定页 ...

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

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

  6. js 控制页面跳转的5种方法

    js 控制页面跳转的5种方法 编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的 History.back是回退一页 Histiory.go(1)前进一页 Hi ...

  7. Jsp页面跳转和js控制页面跳转的几种方法

    Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...

  8. js页面刷新跳转的几种方式及区别

    跳转常用方法: window.location.href="index.php"; window.history.back(-1);//类似于按钮,参数是负几,就后退几次. win ...

  9. jsp页面加载readyState的五种状态根据我们状态添加进度条

    这段代码放在页面最下面 原文如下: document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomet ...

随机推荐

  1. U3D学习08-异步、协程

    1.调用 invoke不能传参, 2.协程(不是线程,拥有自己独立的执行序列) Coroutine(尽可能减少计算,提高运行效率) 需要迭代器IEnumerate,迭代器中有返回方法yield 协程的 ...

  2. Struts2 --简单留言系统

    1.创建数据表,与servlet中相同 2.创建web项目,添加struts2模块,url 选 /*,web.xml中会自动注册struts2,同时src下会自动生成struts2配置文件struts ...

  3. Apache CLI Demo

    1. Options private Options options = new Options(); 2. option (1) way1 launcher.options.addOption(&q ...

  4. synergy一个鼠标键盘控制多台电脑

    有些时候我们同时操作多台电脑,但是我们只用一个鼠标和一个键盘,如果通过转换器啊或者是多个鼠标键盘就非常不方便了 下面我介绍一下通过安装synergy这个软件来给开发人员提供方便 这个软件安装比较简单, ...

  5. sql server与C#中的字符串相等等效写法

    sql server两个字段相等判断默认不区分大小写,并且字符串进行Unicode规范化处理. 等效c#中的相等为s=="字符".ToLower().Normalize(Syste ...

  6. 内存大小设置 Java heap space错误

    1. 问题描述 当从数据库中查询大量的数据,每个模板取出来几百万条数据,或者是频繁的刷新项目.模板时就会占用Java虚拟机JVM的大量内存,超过内存就会出现报java.lang.OutOfMemory ...

  7. 元组,列表的增删改查, for,range 循环

    1. list(增删改查) 列表可以装大量的数据. 不限制数据类型. 表示方式:[] 方括号中的每一项用逗号隔开 列表和字符串一样.也有索引和切片 常用的功能: 1. 增: append() 2. 删 ...

  8. 数据库导入Excel

    package com.cfets.ts.s.user.rest; import java.io.File; import java.io.FileInputStream; import java.i ...

  9. MVC字符串转json,ajax接受json返回值

    #region 功能 /// <summary> /// 查询 微信用户一定年月的账单 /// </summary> /// <param name="year ...

  10. android 开发 xml绘制shape与Selector与layer-list 一 基础篇

    首先我们先来了解状态效果 android:state_pressed=["true" | "false"]  按下状态 android:state_focuse ...