• 技术文章 >web前端 >html教程

    HTML页面自动跳转的五种方法

    高洛峰高洛峰2017-02-24 10:31:52原创1350
    下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件。

    1)html的实现

    <head>  
    <meta http-equiv="refresh" content="5;url=hello.html">  
    </head>

    优点:简单

    缺点:Struts Tiles中无法使用

    2)javascript的实现

    <mce:script language="javascript" type="text/javascript"><!--  
    setTimeout("javascript:location.href='http://liting6680.blog.163.com/blog/hello.html'", 5000);  
    // --></mce:script>

    优点:灵活,可以结合更多的其他功能

    缺点:受到不同浏览器的影响

    3)结合了倒数的javascript实现(IE)

    <span id="totalSecond">5</span>  
    <mce:script language="javascript" type="text/javascript"><!--  
    var second = totalSecond.innerText;  
    setInterval("redirect()", 1000);  
    function redirect(){  
    totalSecond.innerText=--second;  
    if(second<0) location.href='http://liting6680.blog.163.com/blog/hello.html';  
    }  
    // --></mce:script>


    优点:更人性化

    缺点:firefox不支持(firefox不支持span、p等的innerText属性)

    3 )结合了倒数的javascript实现(firefox)

    <mce: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='http://liting6680.blog.163.com/blog/hello.html';  
    }  
    // --></mce:script>

    4)解决Firefox不支持innerText的问题

    <span id="totalSecond">5</span>  
    <mce: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";  
    }  
    // --></mce:script>

    5)整合3)和3')

    <span id="totalSecond">5</span>  
    <mce: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='http://liting6680.blog.163.com/blog/hello.html';  
    } else  
    {  
    if (navigator.appName.indexOf("Explorer") > -1)  
    {  
    document.getElementById('totalSecond').innerText = second--;  
    } else  
    {  
    document.getElementById('totalSecond').textContent = second--;  
    }  
    }  
    }  
    // --></mce:script>

    以上通过五个实例是给大家介绍了HTML实现页面自动跳转的五种方法,希望大家喜欢。

    更多HTML页面自动跳转的五种方法相关文章请关注PHP中文网!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html页面跳转
    上一篇:HTML初学者适用的十五条最佳实践 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ajax基本介绍• 急,急,求帮助呀,美工不会_html/css_WEB-ITnose• jquery的each,map,has• 深入CSS,让网页开发少点“坑”_html/css_WEB-ITnose• 求两个纯Html之间的传值示例_html/css_WEB-ITnose
    1/1

    PHP中文网