当前位置:首页 » 好文分享 » 详情

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

    本文通过五个实例给大家介绍html实现页面自动跳转的五种方法,对html页面跳转相关知识感兴趣的朋友一起学习吧
    下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的url.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、div等的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实现页面自动跳转的五种方法,希望大家喜欢。
    打赏
    X
    打赏方式:
    • 支付宝
    • 微信
    • QQ红包

    打开支付宝扫一扫
    日期:2017年12月06日 15:46:20 星期三   分类:好文分享   浏览(36037)
    本文地址:https://www.blogs.hk/post-2918.html   [百度已收录]
    声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
    版权所有:《博客之家
    文章标题:《HTML实现页面自动跳转的五种方法
    除非注明,文章均为 《博客之家》 原创
    转载请注明本文短网址:https://www.blogs.hk/post-2918.html  [生成短网址]

    留言咨询

    自动获取QQ

    昵称

    邮箱

    网址

        站点统计

        • 收录网址:3370 个
        • 发布文章:3008 条
        • 在线人数:1人
        • 总访问量:270557710次
        • 本站运行:12年5月3天
        Copyright © 2025 博客之家 版权所有  
        關於本站免責聲明sitemap新站登錄