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

    创建一个Widget加到视图,指定为鼠标焦点,并显示鼠标 Lock Always:叫鼠标锁定在游戏窗口内.

  2. springmvc使用步骤

    1.导包 2.在web.xml文件中配置前端控制器dispatchServlet 3.创建springmvc配置文件springmvc.xml 4.编写controller 5.在springmvc中 ...

  3. 禅道-bug管理系统部署

    官方下载: https://www.zentao.net/framework/zentao11.2-80109.html 官方使用说明:(含安装及使用说明,很详细) https://www.zenta ...

  4. shiro 身份验证

    shiro身份验证: 参考链接:http://jinnianshilongnian.iteye.com/blog/2019547 即在应用中证明是本人进行操作,一般通过用户名来证明 在shiro中,用 ...

  5. 注册ActiveX控件

    简单了解一下ActiveX控件的知识,ActiveX控件:简单来说,就是利用封装性的原理,把一些功能封装起来,我们可以再其他程序中使用,进而达到方便的目的.但是要注意ActiveX控件必须要注册后才可 ...

  6. 电商系统架构总结4（webapi 版本控制)

    为了 顺利迭代升级,web api 在维护过程是不断升级的,但用户是不能强迫他们每次都跟随你去升级,这样会让用户不胜其烦.为了保证不同版本的客户端能同时兼容,在web api接口上加入版本控制就很有必 ...

  7. python 27 获取时区转换后的时间

    python3的datetime有timezone属性,这里介绍python2.7环境下,获取时区转换后的时间. 利用第三方插件,pytz,没有安装的话安装一下. #!/usr/bin/env pyt ...

  8. day18包的使用与日志(logging)模块

    包的使用与日志(logging)模块1. 什么是包    包就是一个包含有__init__.py文件的文件夹    包本质就是一种模块,即包是用包导入使用的,包内部包含的文件也都是用来被导入使用2 为 ...

  9. WPF 选择电脑文件显示路径，弹出资源管理器，打开文件

    选择文件,将路径显示在名为txbx的textbox上 // 在WPF中, OpenFileDialog位于Microsoft.Win32名称空间 Microsoft.Win32.OpenFileDia ...

  10. [Lua]string与中文

    参考链接: https://baike.baidu.com/item/%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81/8446880?fr=aladdin#7 http:// ...