js通过调用API判断网络连接状态

最新推荐文章于 2023-03-27 16:19:11 发布

本地是好的

最新推荐文章于 2023-03-27 16:19:11 发布

阅读量370

点赞数

分类专栏： js_笔记 js_实例 js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_40958876/article/details/125224793

版权

网络状态离线提示浏览器检测事件监听前端开发

关键词由CSDN通过智能技术生成

js_笔记同时被 3 个专栏收录

32 篇文章 1 订阅

订阅专栏

js_实例

21 篇文章 0 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏


 if (!navigator.onLine) {
      args.forEach((para) => {
        if (typeof para === 'function') {
          try {
            para('message.offline');
          } catch (e) {

          }
        }
      });
      this.offline();
      return;
  }


  protected offline() {
    const dom = `
        <div id="offline">
          <span>×</span>
          <div class="body">
            <p>无法连接到网络，请检查网络连接</p>
            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzAwMzY1NztvcGFjaXR5OjA7fS5jbHMtMntmaWxsOiNkM2QzZDM7fS5jbHMtM3tmaWxsOiNlNWU1ZTU7fS5jbHMtNHtmaWxsOiNlZmVmZWY7fS5jbHMtNXtmaWxsOiNkZmRmZGY7fS5jbHMtNntmaWxsOiNlOGU4ZTg7fS5jbHMtN3tmaWxsOiNhOGE4YTg7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5pbnRlcm5ldF9kaXNjb25uZWN0ZWQ8L3RpdGxlPjxnIGlkPSLlm77lsYJfMiIgZGF0YS1uYW1lPSLlm77lsYIgMiI+PGcgaWQ9IuWbvuWxgl8xLTIiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiPjxyZWN0IGNsYXNzPSJjbHMtMSIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMTAwKSByb3RhdGUoLTkwKSIvPjxjaXJjbGUgY2xhc3M9ImNscy0yIiBjeD0iNTUuMDQiIGN5PSI3OC42NyIgcj0iNC43MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM0LjY5IDExMi44NCkgcm90YXRlKC03NS44NykiLz48ZWxsaXBzZSBjbGFzcz0iY2xzLTMiIGN4PSI1NS43NyIgY3k9Ijc1Ljc4IiByeD0iNC43NCIgcnk9IjE4LjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMS4zMyAxMTEuMzYpIHJvdGF0ZSgtNzUuODcpIi8+PHBhdGggY2xhc3M9ImNscy00IiBkPSJNNTcuNjUsNjguMzJhNC42OSw0LjY5LDAsMCwwLTUuNTgsMy4wNWMwLC4xMi0uMS4yNC0uMTMuMzZzMCwuMjUtLjA2LjM4Yy40OC42NiwyLjE3LDEuNDgsNC4zMSwyczQsLjYyLDQuNzUuMjZjMC0uMTIuMS0uMjQuMTMtLjM2czAtLjI1LjA2LS4zOEE0LjY5LDQuNjksMCwwLDAsNTcuNjUsNjguMzJaIi8+PHBhdGggY2xhc3M9ImNscy01IiBkPSJNOTksODQuNzdhNjguMDYsNjguMDYsMCwwLDEtNy0xLjY3Yy00LjQtMS4yMy04LjIxLTIuMjktMTUtMS41LTEuMzYuMTYtMi44MS4zNS00LjMzLjU1LTguNzYsMS4xNC0yMC43NSwyLjcxLTM2LC42MkMyOC4zNCw4MS42Myw3LjgzLDgyLjEsMSw4Mi42MWwwLS41YzYuODMtLjUxLDI3LjM5LTEsMzUuNjguMTYsMTUuMiwyLjA4LDI3LjE2LjUyLDM1Ljg5LS42MiwxLjUzLS4yLDMtLjM5LDQuMzQtLjU1LDYuOS0uOCwxMC43NS4yNywxNS4yLDEuNTJhNjcuNjQsNjcuNjQsMCwwLDAsNywxLjY2WiIvPjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0iTTM4LjQsNjUuODRhLjUuNSwwLDAsMS0uNDUtLjcyLDcuNTMsNy41MywwLDAsMSw3LTQuMjlsLjQyLDBhLjUuNSwwLDAsMSwuNDYuNTQuNTEuNTEsMCwwLDEtLjU0LjQ2bC0uMzYsMGE2LjU5LDYuNTksMCwwLDAtNi4xLDMuNzJBLjUuNSwwLDAsMSwzOC40LDY1Ljg0WiIvPjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0iTTM0LjE5LDYzLjgxYS41LjUsMCwwLDEtLjQ1LS43MiwxMi4yNSwxMi4yNSwwLDAsMSwxMS4zNi02LjkzbC42OSwwYS41LjUsMCwwLDEtLjA4LDFsLS42MywwYTExLjI4LDExLjI4LDAsMCwwLTEwLjQzLDYuMzdBLjUuNSwwLDAsMSwzNC4xOSw2My44MVoiLz48cGF0aCBjbGFzcz0iY2xzLTYiIGQ9Ik0zMC4xMSw2MS44NGEuNS41LDAsMCwxLS40NS0uNzIsMTYuODMsMTYuODMsMCwwLDEsMTUuMTMtOS40OWguNDNsLjk0LjA1YS41LjUsMCwwLDEtLjA4LDFsLS44OCwwYTE1Ljc3LDE1Ljc3LDAsMCwwLTE0LjYzLDguOTJBLjUuNSwwLDAsMSwzMC4xMSw2MS44NFoiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNiIgY3g9IjMzLjQxIiBjeT0iNTAuNzEiIHI9IjAuNTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOC4xMyA4Mi44MSkgcm90YXRlKC04OC41NCkiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNiIgY3g9IjMxLjIyIiBjeT0iNDYuOTkiIHI9IjAuNTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNi41NSA3Ny4wMSkgcm90YXRlKC04OC41NCkiLz48cGF0aCBjbGFzcz0iY2xzLTciIGQ9Ik02OSw3OC4wOGExLDEsMCwxLDAsLjg3LTEuMUExLDEsMCwwLDAsNjksNzguMDhaIi8+PHBhdGggY2xhc3M9ImNscy03IiBkPSJNNzMuNDUsODAuODRsLS43NC4wOWEuMzMuMzMsMCwwLDAtLjEyLS4yNmwtLjg5LS43MmEuMzQuMzQsMCwwLDAtLjQ4LDBsLS4xNi4xMmEyLjA4LDIuMDgsMCwwLDEtLjU5LS4xLDQuODQsNC44NCwwLDAsMS0uMy0uMzljMC0uMTMsMC0uNDEtLjI0LS40OWEuNDQuNDQsMCwwLDAtLjQ1LjEyLDEuNzksMS43OSwwLDAsMC0uMjUsMS4wNmMuMDYuNzYuMzQsMS41MS42NywxLjYyYS45LjksMCwwLDAsLjMyLDBoMGwzLjI5LS4zOGEuMzMuMzMsMCwwLDAsLjI5LS4zN2gwQS4zMy4zMywwLDAsMCw3My40NSw4MC44NFptLTItLjI0TDcyLDgxbC0xLjI3LjE1Wm0tMS4xNS0uMzZhLjczLjczLDAsMCwwLC4zNi4xbC0uNDIuMzFhMi42MywyLjYzLDAsMCwxLS4xLS41N0ExLDEsMCwwLDAsNzAuMjksODAuMjRaIi8+PC9nPjwvZz48L3N2Zz4=" alt="">
          </div>
        </div>
      `;

    let timer;
    const removeDom = () => {
      $('#offline').remove();
      clearInterval(timer);
    };

    if (document.getElementById('offline') == null) {
      $('body').append(dom);
      timer = setInterval(() => {
        if (navigator.onLine) {
          removeDom();
        }
      }, 2000);
    }
    $('#offline span').click(removeDom);
  }