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

1) html的实现

1

2

3

4

5

6

<head>

<!-- 以下方式只是刷新不跳转到其他页面 -->

<meta http-equiv="refresh" content="10">

<!-- 以下方式定时转到其他页面 -->

<meta http-equiv="refresh" content="5;url=hello.html">

</head>

优点：简单

缺点：Struts Tiles中无法使用

2) javascript的实现

1

2

3

4

5

6

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

// 以下方式直接跳转

window.location.href="hello.html";

// 以下方式定时跳转

setTimeout("javascript：location.href="hello.html"", 5000);

</script>

优点：灵活，可以结合更多的其他功能

缺点：受到不同浏览器的影响

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

1

2

3

4

5

6

7

8

9

<span id="totalSecond">5</span>

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

var second = totalSecond.innerText;

setInterval("redirect()", 1000);

function redirect(){

totalSecond.innerText=--second;

if(second<0) location.href="hello.html";

}

</script>

优点：更人性化

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

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

1

2

3

4

5

6

7

8

9

<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的问题

1

2

3

4

5

6

7

8

<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")

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<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>

来源：微点阅读  https://www.weidianyuedu.com

HTML页面跳转的五种方法分享。相关推荐

  1. HTML页面跳转的5种方法分享

    转自:微点阅读  https://www.weidianyuedu.com 下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改 ...

  2. html 自动跳转手机版,HTML实现页面自动跳转的五种方法

    在上篇文章给大家介绍了HTML页面3秒后自动跳转的三种常见方法,本文继续给大家介绍有关html页面跳转相关知识,一起学习吧. 下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同 ...

  3. 本地html自动跳转,HTML页面跳转的5种方法

    下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件. 1) html的实现 优点:简单 缺点:Struts Tiles中 ...

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

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

  5. JS 实现页面跳转的几种方法

    JS 实现页面跳转的几种方法 要实现从一个页面A跳到另一个页面B,js实现就在A的js代码加跳转代码 JS跳转大概有以下几种方式: 第一种:(跳转到b.html) <script languag ...

  6. js中实现页面跳转的几种方法

    按钮式: 1 <INPUT name="pclog" type="button" value="GO" onClick="l ...

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

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

  8. 视频直播网站源码，uniapp页面跳转的几种方法和区别

    视频直播网站源码,uniapp页面跳转的几种方法和区别 保留当前页面,可跳转到非 tabBar 页面,使用uni.navigateBack可以返回到原页面(可传参) uni.navigateTo({u ...

  9. php实现页面跳转的几种方法(实例分享)

    发布:theboy   来源:net     [大 中 小] 转自:http://www.jbxue.com/article/2366.html php 页面跳转的几种方法 方法一.header()函 ...

最新文章

  1. IF、Isolation Forest、孤立森林算法
  2. Java基类共同属性设置_java – 你有一个Hibernate实体的基类吗？
  3. 关于SQLServer和MySQL动态条数限制
  4. caffe中在某一层获得迭代次数的方法以及caffe编译时报错 error: ‘to_string‘ is not a member of ‘std‘解决方法
  5. oracle技术之检查点及SCN深入研究
  6. 尝鲜delphi开发android/ios_环境搭建
  7. 【阿里云MPS】MPS(原MTS)概述
  8. CentOS7,linux下nginx的安装过程——2.配置user,路径,openssl,make install，关闭防火墙，测试——源码
  9. C语言课后习题(21)
  10. 【个性化阅读】ZapTxt的提醒姗姗来迟
  11. Python爬虫实战03：用Selenium模拟浏览器爬取淘宝美食
  12. JavaScript数据类型之算术运算符(7）
  13. 习题2.2 数组循环左移（20 分）浙大版《数据结构（第2版）》题目集
  14. MySQL创始人发邮件寻求中国帮助
  15. 最新HyperSnap绿色汉化版
  16. 运算放大器-偏置电流是怎样影响运放电路的
  17. 这是一个没有标题的故事
  18. 开发一个 app 有多难？需要多少钱？
  19. 哈·曼丁的故事（二）
  20. 安卓快速入门系列1（通过插件使用java8的语法）

热门文章

  1. IT人员要善用图表来说明问题
  2. 【前端面试】同学，你会手写代码吗？
  3. Direct3D 11 总结 —— 3 初始化 direct3D，并改变窗口颜色
  4. python构建智能机器人系列博文---借助于python实现QQ，微信消息的自动发送，音乐的自动播放
  5. UNIX环境编程(c语言）--文件I/O-文件共享
  6. CTS Verifier NFC Test
  7. taglib.class.php,thinkphp5 taglib标签库自定义
  8. 邯郸网络服务器机柜型号,42U网络机柜规格服务器机柜型号介绍
  9. mysql 允许远程链接
  10. a different object with the same identifier value was already associated with the session错误