请选择 进入手机版 | 继续访问电脑版
  • 设为首页
  • 收藏本站
  • 桌面快捷
  • 手机版
  • 微信
    站长微信 搜索微信号:
    q515138
  • 快捷导航

    html页面跳转的5种解决方法教程

    [复制链接]
    作者: admin(管理员) | 丢币: 44997 (丢币充值 | 升级VIP) | 查看: 257| 回复: 1| 发表于 2019-5-11 22:26:14 | 显示全部楼层 |阅读模式
    html页面跳转的5种解决方法教程

    下面列了五个例子来详细说明html页面跳转代码教程,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件。
    1) html的实现
    1. <head>
    2. <!-- 以下方式只是刷新不跳转到其他页面 -->
    3. <meta http-equiv="refresh" content="10">
    4. <!-- 以下方式定时转到其他页面 -->
    5. <meta http-equiv="refresh" content="5;url=hello.html">
    6. </head>
    复制代码

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

    2) javascript的实现

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

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

    1. <span id="totalSecond">5</span>
    2. <script language="javascript" type="text/javascript">
    3. var second = totalSecond.innerText;
    4. setInterval("redirect()", 1000);
    5. function redirect(){
    6. totalSecond.innerText=--second;
    7. if(second<0) location.href='hello.html';
    8. }
    9. </script>
    复制代码

    优点:更人性化
    缺点:firefox不支持(firefox不支持span、div等的innerText属性)
    3') 结合了倒数的javascript实现(firefox)
    1. <script language="javascript" type="text/javascript">
    2. var second = document.getElementById('totalSecond').textContent;
    3. setInterval("redirect()", 1000);
    4. function redirect()
    5. {
    6. document.getElementById('totalSecond').textContent = --second;
    7. if (second < 0) location.href = 'hello.html';
    8. }
    9. </script>
    复制代码


    4) 解决Firefox不支持innerText的问题
    1. <span id="totalSecond">5</span>
    2. <script language="javascript" type="text/javascript">
    3. if(navigator.appName.indexOf("Explorer") > -1){
    4. document.getElementById('totalSecond').innerText = "my text innerText";
    5. } else{
    6. document.getElementById('totalSecond').textContent = "my text textContent";
    7. }
    8. </script>
    复制代码

    5) 整合3)和3')
    1. <span id="totalSecond">5</span>

    2. <script language="javascript" type="text/javascript">
    3. var second = document.getElementById('totalSecond').textContent;

    4. if (navigator.appName.indexOf("Explorer") > -1)  {
    5.     second = document.getElementById('totalSecond').innerText;
    6. } else {
    7.     second = document.getElementById('totalSecond').textContent;
    8. }

    9. setInterval("redirect()", 1000);
    10. function redirect() {
    11. if (second < 0) {
    12.     location.href = 'hello.html';
    13. } else {
    14.     if (navigator.appName.indexOf("Explorer") > -1) {
    15.         document.getElementById('totalSecond').innerText = second--;
    16.     } else {
    17.         document.getElementById('totalSecond').textContent = second--;
    18.     }
    19. }
    20. }
    21. </script>
    复制代码
    推荐给好友: [复制链接]
    楼主热帖
    回复

    使用道具 举报

    苹果(新手上路) | 丢币: 9 (丢币充值 | 升级VIP) | 查看: 257| 回复: 1| 发表于 2019-8-20 06:33:47 | 显示全部楼层
    自丢网真心不错,学习教程网。
    回复

    使用道具 举报

    网站地图/免责声明/Archiver/手机版/小黑屋/ZiDiu.Com ( 粤ICP备17166275号 )

    快速回复 返回顶部 返回列表