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

谁践踏了优雅 2024-03-30 13:38 15阅读 0赞

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1]

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

[Link 1]: https://www.weidianyuedu.com/
[Struts]: https://so.csdn.net/so/search?q=Struts&spm=1001.2101.3001.7020
[innerText]: https://so.csdn.net/so/search?q=innerText&spm=1001.2101.3001.7020

发表评论取消回复

表情：

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

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

相关阅读

相关 Flex 页面跳转四种方法

在学习Flex的过程中，你可能会遇到Flex页面跳转的问题，本文和大家分享一下，页面在flex里面其实就是一个个的 Canvas，vbox，hbox等等之类的东西，看到的

痛定思痛。/ 2023年08月17日 15:50/ 0 赞/ 69 阅读

相关 this.$router 的三种跳转页面方法

第一种： this.$router.push('需要跳转到的路径名称') > 此方法跳转后，会在历史栏目中保存路劲地址，当点击历史标签时可以进行访问第二种

叁歲伎倆/ 2022年11月20日 09:47/ 0 赞/ 516 阅读

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

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

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

相关 Html页面跳转

1.html页面简单调转的几种方式 <!DOCTYPE html> <html> <head lang="en"> <meta cha

喜欢ヅ旅行/ 2022年07月21日 00:11/ 0 赞/ 236 阅读

相关 springboot跳转html页面

@RestController注解相当于@ResponseBody ＋ @Controller合在一起的作用。是无法跳转页面的页面中会显示json @Co

淡淡的烟草味﹌/ 2022年05月31日 13:23/ 0 赞/ 263 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 JSP页面跳转的5种方式

前几天笔试做到的一个问题，关于jsp页面跳转的方式，很长时间没看书了，只记得html的几种方式，今天想起这个问题，于是在网上找了些资料整理下。原文转载自：http:

客官°小女子只卖身不卖艺/ 2021年09月11日 01:26/ 0 赞/ 412 阅读