• HTML页面跳转的5种方法


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

     

    1
    2
    3
    4
    5
    6
    <head>
    <!-- 以下方式只是刷新不跳转到其他页面 -->
    <meta http-equiv="refresh" content="10">
    <!-- 以下方式定时转到其他页面 -->
    <meta http-equiv="refresh" content="5;url=hello.html">
    </head>

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

    2) javascript的实现

    1
    2
    3
    4
    5
    6
    <script language="javascript" type="text/javascript">
    // 以下方式直接跳转
    window.location.href='hello.html';
    // 以下方式定时跳转
    setTimeout("javascript:location.href='hello.html'", 5000);
    </script>

    优点:灵活,可以结合更多的其他功能
    缺点:受到不同浏览器的影响
    3) 结合了倒数的javascript实现(IE)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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的问题

    1
    2
    3
    4
    5
    6
    7
    8
    <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')

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <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>
  • 相关阅读:
    The three toppaying tech roles in 2022 and the skills you need to land them
    Using serilog with azure application insights and .Net core
    炉石传说 佣兵战纪 奥特兰克山谷
    跑步减肥 不同年龄要有不同配速
    聊聊微软面试 超哥的地盘
    风暴英雄上传录像举报
    Node.js Express 框架 规格严格
    redis查询key的数量 规格严格
    MySQL DATE_FORMAT() 函数 规格严格
    fastjson/jackson 转 json Boolean布尔类型 is丢失问题 规格严格
  • 原文地址:https://www.cnblogs.com/felix-/p/4319833.html
Copyright © 2020-2023  润新知