下面列了五个例子来详细说明，这几个例子的主要功能是：在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. [UE4]缓存选项 Is volatile

    volatile:易变的,不稳定的; (液体或油) 易挥发的; 爆炸性的; 快活的,轻快的; UI中的Is Volatile选项:意思当前控件是容易变化的. 这个是一个性能上的优化. 默认情况下UI都 ...

  2. [UE4]通过IP地址加入游戏

  3. C#一年中有多少周方法和js一年中第几周

    最近在做一个时间插件,用的是jquery-daterangepicker ,现在分享一下查询时间是一年中的第几周的js方法  和 一年中有多少周的C#后台方法,默认是按照周一为一周的开始,如果一年的第 ...

  4. jdbc连接池&改进dbUtil成C3P0Util

    一.jdbc连接池 1.连接池的存在理由   前面介绍的dbUtils工具类虽然实现了一个对jdbc的简单封装.但它依旧采取从驱动管理获取连接 (DriverManager.getConnection ...

  5. JDBC连接数据库，结合DbUtil数据库连接工具类的使用

    (以Mysql数据库为例) 第一步:在项目里配置数据库驱动 Build Path->configure  Build Path ->Add Exteral JARs   将JDBC驱动包导 ...

  6. C#语言基础知识

    一. string i_str = "321"; string 型,强制转换成 int 型 int i_int1 = int.parse(i_str); string 型,强制转换 ...

  7. Linux IO多路复用 select/poll/epoll

    Select -- synchronius I/O multiplexing select, FS_SET,FD_CLR,FD_ISSET,FD_ZERO #include <sys/time. ...

  8. Java 12 - Java StringBuffer和StringBuilder类

    Java StringBuffer和StringBuilder类 当对字符串进行修改的时候,需要使用StringBuffer和StringBuilder类. 和String类不同的是,StringBu ...

  9. SpringBoot 实现前后端分离的跨域访问（CORS）

    序言:跨域资源共享向来都是热门的需求,使用CORS可以帮助我们快速实现跨域访问,只需在服务端进行授权即可,无需在前端添加额外设置,比传统的JSONP跨域更安全和便捷. 一.基本介绍 简单来说,CORS ...

  10. Java后端开发奋斗之路

    本人方向:Java后端开发方向,本文中内容持续更新中 Java技术栈:https://www.cnblogs.com/wyb666/p/10222070.html 推荐书籍:<程序员代码面试指南 ...