zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    LeetCode 326. Power of Three
    LeetCode 324. Wiggle Sort II
    LeetCode 322. Coin Change
    LeetCode 321. Create Maximum Number
    LeetCode 319. Bulb Switcher
    LeetCode 318. Maximum Product of Word Lengths
    LeetCode 310. Minimum Height Trees (DFS)
    个人站点大开发!--起始篇
    LeetCode 313. Super Ugly Number
    LeetCode 309. Best Time to Buy and Sell Stock with Cooldown (DP)
  • 原文地址:https://www.cnblogs.com/felix-/p/4319833.html
Copyright © 2011-2022 走看看