H方法TML 页面跳转的五种方法

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

<head>
<!-- 以下方式只是刷新不跳转到其他页面 -->
<meta http-equiv="refresh" content="10">
<!-- 以下方式定时转到其他页面 -->
<meta http-equiv="refresh" content="5;url=hello.html">
</head>

优点：简单
缺点：Struts Tiles中无法使用

2) javascript的实现

<script language="javascript" type="text/javascript">

// 以下方式直接跳转
window.location.href='hello.html';
// 以下方式定时跳转
setTimeout("javascript:location.href='hello.html'", 5000);
</script>

优点：灵活，可以结合更多的其他功能
 缺点：受到不同浏览器的影响

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

<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript"> 
  var second = totalSecond.innerText;
  setInterval("redirect()", 1000);
function redirect()
{
   totalSecond.innerText=--second;
   f(second<0) location.href='hello.html';
}
</script>

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

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

<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 = 'hello.html';
}
</script>

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

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

5) 整合3)和3')

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

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

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

    下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件. 1)html的实现 复制代码 代码如下: <head> ...

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

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

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

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

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

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

  5. Flex页面跳转的五种实现方式

    Flex页面跳转有很多值得学习的地方,本文向大家介绍一下Flex页面跳转的几种方式,主要包括五种方式,这里为大家一一介绍. AD:   在学习Flex的过程中,你可能会遇到Flex页面跳转的概念,这里 ...

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

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

  7. ASP.NET页面跳转的三种方法比较

    在ASP.NET下,经常需要在页面之间跳转,下面我们来分别介绍一下关于.NET中Response.Redirect(),Sever.Execute(),Server.Transfer() 三种页面跳转 ...

  8. jquery/js/a标签实现当前页面跳转的两种方法

    在逛购物网站首页时经常看到侧边导航栏,当我们点击导航栏中某一项时会跳转到当前页面的某一处 有两种方法实现,一种是利用js计算好各位置的高度,通过绑定事件使页面跳转到指定位置,另一种是利用a标签进行当前 ...

  9. HTML页面跳转的5种方法

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

随机推荐

  1. Vue生成分享海报(含二维码)

    本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 功能需求: 海报有1张背景 ...

  2. 响应式web设计（Responsive web design）

    在全面进入互联网时代后,随着各种移动设备的普及,移动互联网更加受到大众的青睐.由于移动互联网的使用量远远超出了传统互联网的使用量,移动设备也正在逐渐超越桌面设备.因为用户在移动设备上的使用习惯不同,U ...

  3. 9.1 ArrayList（集合）的使用，与array（数组）的对比

    1.array 和ArrayList的区别? array 数组的长度是固定的,适应不了变化的需求. ArrayList集合的长度可变.大小可变. 2.为什么要用集合,它优点是什么? java是面向对象 ...

  4. MVC学习的心路历程

    2020/4/17 之前接触过三层架构,但是没有接触过mvc,所以有点蒙,所以现在在一步步构建思路. 1.了解MVC的发展,做一个简单的项目.

  5. python这门语言为什么要起这个名字

    我只是一只可爱的小虫 前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:Liz喵 PS:如有需要Python学习资料的小 ...

  6. Persona & User Scenario

    Persona: Tom:男,21岁,大学生,周末经常和同学们一起出去吃饭.唱歌.打球.郊游,期间会时不时拍一些照片以作纪念,长期积累的照片数量较多且内容繁杂,很少对照片进行整理: Alisa:女,2 ...

  7. Jmeter发送jdbc请求进行大批量造数

    创建批量造数脚本,一个简单的结构如下图所示, 1.线程组(10个线程重复运行2次,相当于造20个数) 2.用户定义变量(这是全局变量,用于后面随机筛选用) 3.数据库连接配置 4.计数器(用于主键递增 ...

  8. F. 蚂蚁装修

    单点时限: 2.0 sec 内存限制: 512 MB 还有一个月就开学了,爱学习的小蚂蚁想庆祝一下!于是它要把它的“家”装修一下.首先要做的就是贴地板.小蚂蚁“家”的地面可以看成一个2∗N 的方格 , ...

  9. F - Dragon Balls

    Five hundred years later, the number of dragon balls will increase unexpectedly, so it's too difficu ...

  10. 详解 File类

    在讲解File类之前,本人先要讲解下 路径,因为我们对于文件的操作是离不开路径的: 目录 路径: File类 文件名称过滤器: 路径: 请观看本人博文 -- <详解 绝对路径与 相对路径> ...