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

    Platform Version API Level VERSION_CODE Notes Android 8.1  27    O_MR1 平台亮点Android 8.0  26  O 平台亮点An ...

  2. Jmeter（三十八）Jmeter Question 之 ‘批量执行SQL语句’

    知识使我们变得玩世不恭,智慧使我们变得冷酷无情,我们思考的太多,感知太少,除了机器,我们更需要人性,除了智慧,我们需要仁慈和善良. ------出自查理卓别林的演讲 前面有提到Jmeter使用JDBC ...

  3. 凭什么说AMQP比JMS优秀啊？JMS才是真正实现了一个客户端调用多种产品的消息中间件啊

    一.AMQP 历史​ 消息队列(Message Queue)起源于一位来自 MIT 的硬件设计教育工作者 Vivek Ranadivé 设想了一种通用软件总线,就像主板上的总线那样,供其他应用程序接入 ...

  4. Linux常用命令1-50（持续更新中）

    1:echo $PATH  (打印出PATH变量的值) 不同用户下面的PATH值有可能不一样 echo   有显示打印的意思 $         表示后面的是一个变量的意思 PATH  变量 /usr ...

  5. 《Exploring in UE4》多线程机制详解[原理分析]

    转自:https://zhuanlan.zhihu.com/c_164452593 目录一．概述二．"标准"多线程三．AsyncTask系统3.1 FQueuedThreadPoo ...

  6. 您无法登陆系统。原因可能是您的用户记录或所属的业务部门在Microoft Dynamics CRM中已被禁用

    问题发生在CRM 4.0 上 1 用户所在办事处及办事处上级被禁用. 2 如果已经重新启用了,还是报这个错误. 可以把停用的办事处及相关下级再重新--停用--启用一次试试. 3 如果还是报错,查看是否 ...

  7. C，Java，C#数据类型对比总结

  8. Java 1-Java 基础语法

    一个Java程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如,一条狗是一个对象,它的 ...

  9. 大小端,memcpy和构造函数

    问题:memcpy一段内存到std::bitset里,bitset里的内存数据和被拷贝的内存数据对应不上 代码如下: #include <iostream> #include <bi ...

  10. 《算法》第四章部分程序 part 2

    ▶ 书中第四章部分程序,加上自己补充的代码,随机生成各类无向图 ● 随机生成无向图 package package01; import edu.princeton.cs.algs4.StdOut; i ...