HTML实现页面自动跳转的五种方法

时间：2021-09-28 02:48:10

下面列了五个例子来详细说明，这几个例子的主要功能是：在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. 实现网页页面跳转的几种方法&lpar;meta标签、js实现、php实现&rpar;

    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高手速成--第二部分 工具库

    主要包括那些不错的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多媒体相关及其他. 一.依赖注入DI 通过依赖注入减少Vie ...

  2. MINIUI版本破解

    miniui类似easyui是一个web ui,功能比不上人家还是收费,收费也就算了,代码还加密混淆,过期提示脚本越写越离谱,严重低估IT人员的智慧,对此表示强烈不满,故下载了几个版本花了一小时破解: ...

  3. 20151216Repeater

    Repeater 用法:.绑定数据源 Repeater1.DataSource = context.Info; Repeater1.DataBind(); .造项模版: 头模版:HeaderTempl ...

  4. PHP文件上传与安全

    文件上传的流程 上传必须由POST方式的file类型表单提交,被提交的地方 一定是一个php程序,用户在表单使用file类型的域.选在一个自己电脑上的文件,提交到php程序以后 其实就已经完成了一个上 ...

  5. Vue2&period;0环境搭建和测试demo

    Vue2.0 推荐开发环境 Homebrew 1.0.6(Mac).Node.js 6.7.0.npm 3.10.3.webpack 1.13.2.vue-cli 2.4.0.Atom 1.10.2 ...

  6. asp&period;net session的原理

    session,会话,指的就是用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间. A用户和C服务器建立连接时所处的Session同B用户和C服务器建立连 ...

  7. 初学 Python（十五）——装饰器

    初学 Python(十五)--装饰器 初学 Python,主要整理一些学习到的知识点,这次是生成器. #-*- coding:utf-8 -*- import functools def curren ...

  8. CentOS7 nginx简单配置pathinfo模式（ThinkPHP）

    location ~ \.php {    #去掉$ root          H:/PHPServer/WWW; fastcgi_pass   127.0.0.1:9000; fastcgi_in ...

  9. 20155208徐子涵 《网络对抗技术》Web基础

    20155208徐子涵 <网络对抗技术>Web基础 实验要求 Web前端HTML Web前端javascipt Web后端:MySQL基础:正常安装.启动MySQL,建库.创建用户.修改密 ...

  10. Linux下的进程结构

    Linux系统是一个多进程的系统,它的进程之间具有并行性.互不干扰等特点.也就是说,每个进程都是一个独立的运行单位,拥有各自的权利和责任.其中,各个进程都运行在独立的虚拟地址空间.因此,即使一个进程发 ...

相关文章