html5篇：实现页面跳转的5种方式（代码分享）

百变鹏仔 3个月前 (09-22) #HTML

文章标签跳转

之前的文章《一招教你使用css给html字体添加背景图》中，给大家介绍了怎样使用css给html字体添加背景图的方法。下面本篇文章给大家介绍使用html5怎么实现页面跳转的方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所助。

下面列了五个例子来详细说明，这几个例子的主要功能是：在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=&#39;hello.html&#39;;// 以下方式定时跳转setTimeout("javascript:location.href=&#39;hello.html&#39;", 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; if(second<0) location.href=&#39;hello.html&#39;; } </script>

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

4、结合了倒数的javascript实现（firefox）

<script language="javascript" type="text/javascript"> var second = document.getElementById(&#39;totalSecond&#39;).textContent; setInterval("redirect()", 1000); function redirect() { document.getElementById(&#39;totalSecond&#39;).textContent = --second; if (second < 0) location.href = &#39;hello.html&#39;; } </script>

5、解决Firefox不支持innerText的问题

<span id="totalSecond">5</span><script language="javascript" type="text/javascript"> if(navigator.appName.indexOf("Explorer") > -1){ document.getElementById(&#39;totalSecond&#39;).innerText = "my text innerText"; } else{ document.getElementById(&#39;totalSecond&#39;).textContent = "my text textContent"; } </script>

完整代码带3和4

<span id="totalSecond">5</span><script language="javascript" type="text/javascript"> var second = document.getElementById(&#39;totalSecond&#39;).textContent; if (navigator.appName.indexOf("Explorer") > -1)  { second = document.getElementById(&#39;totalSecond&#39;).innerText; } else { second = document.getElementById(&#39;totalSecond&#39;).textContent; } setInterval("redirect()", 1000); function redirect() { if (second < 0) { location.href = &#39;hello.html&#39;; } else { if (navigator.appName.indexOf("Explorer") > -1) { 	document.getElementById(&#39;totalSecond&#39;).innerText = second--; } else { 	document.getElementById(&#39;totalSecond&#39;).textContent = second--; } } } </script>

推荐学习：Html视频教程

文章推荐

html5篇：实现页面跳转的5种方式（代码分享）

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8