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

<head>

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

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

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

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

</head>

优点：简单
缺点：Struts Tiles中无法使用

2) javascript的实现

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

// 以下方式直接跳转

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

// 以下方式定时跳转

setTimeout("javascript:location.href='hello.html'", 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='hello.html';

}

</script>

优点：更人性化
缺点：firefox不支持（firefox不支持span、div等的innerText属性）
3') 结合了倒数的javascript实现（firefox）

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

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

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

来源 http://www.cnblogs.com/qqziyuan8/ 转载请注明出处！

HTML页面跳转的5种方法的更多相关文章

  1. 实现网页页面跳转的几种方法(meta标签、js实现、php实现)

    1.meta标签实现 只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面  代码如下 复制代码 1 <meta http-equiv="refresh&quo ...

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

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

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

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

  4. HTML 页面跳转的五种方法

    H方法TML 页面跳转的五种方法 下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件.1) html的实现 <he ...

  5. 实现网页页面跳转的几种方法大全(meta标签、js实现、php实现)

    1.meta标签实现 只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面  代码如下 复制代码 1 <meta http-equiv="refresh&quo ...

  6. ASP.NET页面跳转的三种方法比较

    在ASP.NET下,经常需要在页面之间跳转,下面我们来分别介绍一下关于.NET中Response.Redirect(),Sever.Execute(),Server.Transfer() 三种页面跳转 ...

  7. jquery/js/a标签实现当前页面跳转的两种方法

    在逛购物网站首页时经常看到侧边导航栏,当我们点击导航栏中某一项时会跳转到当前页面的某一处 有两种方法实现,一种是利用js计算好各位置的高度,通过绑定事件使页面跳转到指定位置,另一种是利用a标签进行当前 ...

  8. 微信小程序页面跳转的四种方法

    wx.navigateTo({}) ,保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回; 示例: 1 wx.navigateTo({ 2 url:'../test/ ...

  9. uni-app 页面跳转的两种方法

    1.navigator  标签 <navigator url="../component/classdetails/classdetails"> <view cl ...

随机推荐

  1. {MBR}{Grub}win7+Linux恢复MBR

    准备:win7安装盘,Linux安装盘 Step1:在linux下查看一下硬盘的信息fdisk -l,找到hd0和ext分区的信息 Step2: 重启插入win7安装盘,对windows系统恢复Gru ...

  2. bash coding to changeNames

    ____通配符和正则表达式 此处的定义只针对linux 中的shell语言,对其它语言不适用 _正则表达式用来在文件中匹配符合条件的字符串,正则是包含匹配.grep.awk.sed等命令可以支持正则表 ...

  3. linux 学习8 权限管理

    第八章 权限管理 8.1 ACL权限 8.2 文件特殊权限 8.3 文件系统属性chattr权限 8.4 系统命令sudo权限 8.1 ACL权限 ACL权限简介与开启 查看与设定ACL权限 最大有效 ...

  4. Graded Browser Support

    ( The YUI Target Environments Matrix is here) About the Browser Test Baseline and Operating Systems ...

  5. QT中的C/S通信问题：关于服务器端readyread()信号不发射

    在windows下用QT测试C/S通信的时候,遇到服务器端不能读取客户端发来的数据的问题. 后来设置断点检查错误,发现是readyread信号不触发的原因. 后来在客户端写socket后面加了一句so ...

  6. 移动端bug整理，随时更新

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #454545 } p.p2 { margin: 0.0p ...

  7. node中global

    global:表示Node所在的全局环境,类似于浏览器的window对象.需要注意的是,如果在浏览器中声明一个全局变量,实际上是声明了一个全局对象的属性,比如var x = 1等同于设置window. ...

  8. 初学c# -- 学习笔记（四）

    想想,数据库先用mysql了,这玩意小且安装方便.前面web学了些,现在学winform的.数据库先看看便捷的mysql. 下载了一个mysql5.7版的,装上居然找不到密码,重装3.4回,找不到,说 ...

  9. Android资源文件简介

    Android资源文件简介 1. Android应用资源的作用 (1) Android项目中文件分类 在Android工程中, 文件主要分为下面几类 : 界面布局文件, Java src源文件, 资源 ...

  10. 关于oracle 10g creating datafile with zero offset for aix

    参考文档: 1.创建oracle数据文件时需要注意的地方(OS Header Block) http://www.aixchina.net/Question/20406 2.oracle 创建数据文件 ...