HTML实现页面跳转的几种方法盘点

朱雀 2024-03-27 09:14 91阅读 0赞

![0272187ccdb815d5ce09272940402dca.jpeg][]

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

[0272187ccdb815d5ce09272940402dca.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/62c13ee9637b4d05a9a1012367253e1b.png
[https_www.weidianyuedu.com]: https://www.weidianyuedu.com

发表评论取消回复

表情：

评论列表（有 0 条评论，91人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML页面跳转的5种方法分享

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1] 下面列了五个例子来详细说明，这几个例子的主要功能是：在5秒后

谁践踏了优雅/ 2024年03月30日 13:38/ 0 赞/ 80 阅读

相关 HTML实现页面跳转的5种方法

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

- 日理万妓/ 2024年03月27日 14:41/ 0 赞/ 78 阅读

相关 HTML实现页面跳转的几种方法盘点

![0272187ccdb815d5ce09272940402dca.jpeg][] 下面列了五个例子来详细说明，这几个例子的主要功能是：在5秒后，自动跳转到同目录下的hel

朱雀/ 2024年03月27日 09:14/ 0 赞/ 92 阅读

相关分享HTML页面跳转的5种方法

![6b83b127c4e02bb3477789eb8726b90e.jpeg][] 下面列了五个例子来详细说明，这几个例子的主要功能是：在5秒后，自动跳转到同目录下的hel

心已赠人/ 2024年03月26日 11:07/ 0 赞/ 76 阅读

相关 vue跳转页面常用的几种方法

vue跳转页面有好几种不同方法，下面将通过实例代码给大家介绍，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下。 1：router-link跳转

水深无声/ 2022年10月19日 04:17/ 0 赞/ 230 阅读

相关 html自动跳转页面,HTML实现页面自动跳转的五种方法

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

素颜马尾好姑娘i/ 2022年10月05日 10:46/ 0 赞/ 374 阅读

相关 CGI实现HTML页面跳转的几种方式

原文：[https://blog.csdn.net/Jocker\_xie/article/details/89386766][https_blog.csdn.net_Jock

柔光的暖阳◎/ 2022年01月15日 01:05/ 0 赞/ 497 阅读

相关 HTML页面跳转的5种方法

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

客官°小女子只卖身不卖艺/ 2022年01月07日 19:37/ 0 赞/ 320 阅读

相关防止页面跳转的几种方法

1.`<a href="javascript:;" >先学习</a>` `<a href="javascript:;" >点我试试</a>`：执行一段空白的javascr

Myth丶恋晨/ 2021年11月29日 16:34/ 0 赞/ 470 阅读

相关 JSP页面跳转的几种实现方法

初衷：将登录用户的用户名密码form提交到页面2（jsp就是servlet 提交到servlet的就不说了）由页面2判断用户名密码的正确性继而决定跳转的方向下面是几种实

你的名字/ 2021年10月09日 09:46/ 0 赞/ 356 阅读