HTML页面自动跳转的五种实现方法
下面列了五个例子来详细说明，这几个例子的主要功能是：在5秒后，自动跳转到同目录下的hello.html（根据自己需要自行修改）文件。
1）html的实现
<head> <meta http-equiv="refresh" content="5;url=hello.html"> </head>
优点：简单
缺点：Struts Tiles中无法使用
2）javascript的实现
<mce:script language="javascript" type="text/javascript"><!-- setTimeout("javascript:location.href='http://liting6680.blog.163.com/blog/hello.html'", 5000); // --></mce:script>
优点：灵活，可以结合更多的其他功能
缺点：受到不同浏览器的影响
3）结合了倒数的javascript实现（IE）
<span id="totalSecond">5</span> <mce:script language="javascript" type="text/javascript"><!-- var second = totalSecond.innerText; setInterval("redirect()", 1000); function redirect(){ totalSecond.innerText=--second; if(second<0) location.href='http://liting6680.blog.163.com/blog/hello.html'; } // --></mce:script>
优点：更人性化
缺点：firefox不支持（firefox不支持span、div等的innerText属性）
3 ' ）结合了倒数的javascript实现（firefox）
<mce: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='http://liting6680.blog.163.com/blog/hello.html'; } // --></mce:script>
4）解决Firefox不支持innerText的问题
<span id="totalSecond">5</span> <mce: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"; } // --></mce:script>
5）整合3）和3'）
<span id="totalSecond">5</span> <mce: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='http://liting6680.blog.163.com/blog/hello.html'; } else { if (navigator.appName.indexOf("Explorer") > -1) { document.getElementById('totalSecond').innerText = second--; } else { document.getElementById('totalSecond').textContent = second--; } } } // --></mce:script>
HTML页面自动跳转的五种实现方法相关推荐
- html 页面自动跳转的五种实现方法
下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的02view.html(根据自己需要自行修改)文件. <wbr><wbr><wbr> ...
- html 自动跳转手机版,HTML实现页面自动跳转的五种方法
在上篇文章给大家介绍了HTML页面3秒后自动跳转的三种常见方法,本文继续给大家介绍有关html页面跳转相关知识,一起学习吧. 下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同 ...
- 页面自动跳转的几种实现方法
很多时候我们需要Web页具备有自动跳转功能,例如,论坛中的用户登录.发帖及回复或留言簿中的留言和回复等操作成功后,若用户没有任何鼠标点击操作,过了一定的时间,页面自动跳转到预设的页面.本文讨论网页自动 ...
- 禁止IE页面自动跳转到EDGE浏览器的方法教程
IE浏览器一直是我们最常用的浏览器,但是Windows系统在大力推广edge浏览器的时候强制原来的IE用户使用IE浏览器的时候直接跳转到edge浏览器.应该怎么禁止IE浏览器跳转edge浏览器呢?下面 ...
- js实现页面自动跳转
本文导读:自动转向,也叫自动重定向.自动跳转,指当访问用户登陆到某网站时,自动将用户转向其它网页地址的一种技术.转向的网页地址可以是网站内的其它网页,也可以是其它网站.通常情况下,浏览器会收到一个网页 ...
- 页面自动跳转实现方法
自动转向,也叫自动重定向.自动跳转,指当访问用户登陆到某网站时,自动将用户转向其它网页地址的一种技术.转向的网页地址可以是网站内的其它网页,也可以是其它网站.通常情况下,浏览器会收到一个网页,该页面含 ...
- 页面自动跳转php,网站页面自动跳转实现方法PHP、JSP等
网站页面自动跳转实现方法PHP.JSP等 自动转向,也叫自动重定向.自动跳转,指当访问用户登陆到某网站时,自动将用户转向其它网页地址的一种技术.转向的网页地址可以是网站内的其它网页,也可以是其它网站. ...
- 小程序页面之间数据传递的五种方法
小程序页面之间数据传递的五种方法 目录 小程序页面之间数据传递的五种方法 **使用 `wx.navigateTo()` 时,在 url 中拼接,这种方法适用于数据量少的情况** **使用 `wx.na ...
- 页面自动刷新,页面自动跳转
1.页面自动刷新:把如下代码加入<head>区域中 CODE: <meta http-equiv="refresh" content="20" ...
最新文章
- 祝「杭州程序媛」母亲节快乐！
- 【分布计算环境学习笔记】9 Web Service
- Qt修炼手册2_动态设计
- 【转】shell pipe与输入输出重定向的区别
- CPU上电后加载程序的流程 | 基于RK3399
- oracle逻辑结构（2）
- 算法：数组中的逆序对
- Win10 开机密码破解
- OpenCV+Python学习笔记 : 图像灰度化处理
- js 新年倒计时 代码
- 数字计算机如何分类 依据是什么,计算机如何分类？
- 一篇文章彻底搞懂海明码
- 3.3.2 WTL应用向导安装和项目建立
- 亲测有效，最简单的Win10系统下的IDEA Ultimate2019.1.3安装和破解秘籍
- 颜色搭配之BUTTONS 1.0
- meta20 无法安装 google play_不ROOT不刷机，小米手机如何安装谷歌 GMS 三件套
- 北京新生儿医保办理流程【非京籍】
- jarvis OJ web babyphp
- 安装的java打不开tsa文件_java – 具有https tsa的JDK 1.7 jarsigner不再有效
- 一文看懂-ElasticSearch全文搜索引擎