H方法TML 页面跳转的五种方法

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

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

  1. HTML实现页面自动跳转的五种方法

    下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件. 1)html的实现 复制代码 代码如下: <head> ...

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

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

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

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

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

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

  5. Flex页面跳转的五种实现方式

    Flex页面跳转有很多值得学习的地方,本文向大家介绍一下Flex页面跳转的几种方式,主要包括五种方式,这里为大家一一介绍. AD:   在学习Flex的过程中,你可能会遇到Flex页面跳转的概念,这里 ...

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

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

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

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

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

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

  9. HTML页面跳转的5种方法

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

随机推荐

  1. .net 后台调用前台JS函数

    ScriptManager.RegisterStartupScript(this, this.GetType(), "", "<script>alert('上 ...

  2. rdd简单操作

    1.原始数据 Key value Transformations(example: ((1, 2), (3, 4), (3, 6)))  2. flatMap测试示例 object FlatMapTr ...

  3. tf.nn.depthwise_conv2d 卷积

    tf.nn.depthwise_conv2d( input, filter, strides, padding, rate=None, name=None, data_format=None ) 参数 ...

  4. Python-selenium安装与Java-selenium安装

    一.Python安装及selenium的安装 1.安装Pythonhttps://www.Python.org2.安装setuptools.distribute.piphttps://pypi.pyt ...

  5. linux 文件的查找和压缩

    1.使用 locate 命令 需要安装:yum install mlocate -y 创建或更新 slocate/locate 命令所必需的数据库文件:updatedb 作用:搜索不经常改变的文件如配 ...

  6. 12. 前后端联调 + ( proxy代理 ) + ( axios拦截器 ) + ( css Modules模块化方案 ) + ( css-loader ) + ( 非路由组件如何使用history ) + ( bodyParser,cookieParser中间件 ) + ( utility MD5加密库 ) + ( nodemon自动重启node ) + +

    (1) proxy 前端的端口在:localhost:3000后端的端口在:localhost:1234所以要在webpack中配置proxy选项 (proxy是代理的意思) 在package.jso ...

  7. 必须先理解的RocketMQ入门手册，才能再次深入解读

    RocketMQ入门手册 RocketMQ是一个分布式.队列模型的开源消息中间件,前身是MetaQ,是阿里研发的一个队列模型的消息中间件,后开源给apache基金会成为了apache的顶级开源项目,具 ...

  8. ACNet: 特别的想法，腾讯提出结合注意力卷积的二叉神经树进行细粒度分类 | CVPR 2020

    论文提出了结合注意力卷积的二叉神经树进行弱监督的细粒度分类,在树结构的边上结合了注意力卷积操作,在每个节点使用路由函数来定义从根节点到叶子节点的计算路径,结合所有叶子节点的预测值进行最终的预测,论文的 ...

  9. java 递归及其经典应用--求阶乘、打印文件信息、计算斐波那契数列

    什么是递归 我先看下百度百科的解释: 一种计算过程,如果其中每一步都要用到前一步或前几步的结果,称为递归的.用递归过程定义的函数,称为递归函数,例如连加.连乘及阶乘等.凡是递归的函数,都是可计算的,即 ...

  10. 对JavaScript中的this的理解

    什么是this: 解析器(就是浏览器)在调用函数时,每次都会向函数内部传递两个隐含的参数: 这两个隐含参数其中一个就是this(还有一个是arguments,用来接收函数的实参),this指向的是一个 ...