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. windows下扩展yaf，并生成yaf框架文件

    YAF中文文档:http://www.laruence.com/manual/index.html 1 YAF框架是用C开发的,属于PHP的扩展框架: 2 YAF的性能相对于源生PHP,性能只降低不到 ...

  2. java 字符串截取 - 最后带上mysql字符串截取比较

    Java中的substring()方法有两个方法的重载,一个带一个参数的,一个带两个参数的. 第一种写法: substring(n);//从索引是n的字符开始截取,条件(n>=0,n<字符 ...

  3. python批量添加hexo文章封面

    ❝ 本文需要工具: 「excel」 「python3.x」 ❞ 今天突然觉得,我的博客的文章更新这么多了竟然还没有一个封面,觉得首页相当低调了- 首页 正好皮肤带有文章封面功能,所以我觉得要将文章批量 ...

  4. 对于之间不平凡的我，为什么会选择IT！（上）

    我相信有很多小伙伴看了我发布的文章后,不知道对大家有无启发,在这里我都非常感谢大家的收看,因为现在收疫情影响,我也看到很多朋友私信我,看你经历这么多是经历了什么,如果大家在上一篇发现的时候会看见我父亲 ...

  5. 选择IT行业的自我心得，希望能帮助到各位！（四）

    俗话说,只有尝过人生的苦,吃过人生的亏,你才能吃一见长一智,人生教会了我们该如何去吃亏,该如何做人,该如何和人打交道,生活会让我们低下无数的头,就看你怎么去面对这些曲折该如何告诉自己不能就被这样打到, ...

  6. 第三章：shell变量知识进阶

    特殊变量:位置变量大于9的时候,需要加上(),例如$(10)$*获取脚本的所有参数,如果不加""和$@是一样的效果,如果加上"",则表示所有参数组成一个字符串$ ...

  7. L17 AlexNet VGG NiN GoogLeNet

    深度卷积神经网络(AlexNet) LeNet: 在大的真实数据集上的表现并不尽如⼈意. 1.神经网络计算复杂. 2.还没有⼤量深⼊研究参数初始化和⾮凸优化算法等诸多领域. 机器学习的特征提取:手工定 ...

  8. O - Navigation System CodeForces - 1321D

    题目大意:有一个导航系统,会根据你当前的位置,规划到目的地的最短路线,给你一个有向图,和一条行驶路径,问你导航重新规划路径的最大次数和最小次数. 读题的时候题意特别不理解,何为最大次数,何为最小次数? ...

  9. Docker-None & Host 网络

    本节介绍None&Host网络. 1.前言 点击此处回到docker系列文章目录 前面我们介绍了bridge network,本小节继续介绍none和host.这两个比较简单,也不太常用.安装 ...

  10. frame/iframe多表单切换

    应用场景: 在Web应用中经常会遇到frame/iframe表单嵌套页面的应用,WebDriver只能在一个页面上对元素识别与定位,对于frame/iframe表单内嵌页面上的元素无法直接定位.这时就 ...