zoukankan      html  css  js  c++  java
  • 页面检测网络*连接- 网页基础模块(JavaScript)

    1. 方法一

     html 添加图片标签

    加载外站图片

        <img id="connect-test" style="display:none;" onload="conectSuccess()" onerror="conectError()" />
    

    加载成功执行 connectsuccess()函数;

    // 浏览器动态数据检测 联机执行函数
      function conectSuccess(){
        //
        //网络可访问时加载
        //document.write("<scr"+"ipt src="##.js"></sc"+"ript>");
        alert("Network connect!");
      }

    加载失败执行 conectError()函数; 

    // 浏览器动态数据检测未联机执行函数
    function conectError(){
        //网络不可访问时加载
        //
    
        //document.write("<scr"+"ipt src="##.js"></sc"+"ript>");
    
        alert("Network disconnect!");
      }

    模块添加主函数

      // 浏览器动态数据检测
      function connectionLisner()
      {
        var imgPath = "https://www.baidu.com/img/bd_logo1.png";
        var timeStamp = Date.parse(new Date());
        $("#connect-test").attr("src", imgPath + "?timestamp=" + timeStamp);
      }
    

    获取联机状态函数 经测试没有实现

    借鉴jb之家的方法。。。不不行! 

    // 获取连接状态
    function get_status(){
      var connection = navigator.connection||navigator.mozConnection||navigator.webkitConnection||{tyep:'unknown'};
      var type_text = ['unknown','ethernet','wifi','2g','3g','4g','none'];
    
      if(typeof(connection.type) == "number"){
        connection.type_text = type_text[connection.type];
      }else{
        connection.type_text = connection.type;
      }
      if(typeof(connection.bandwidth) == "number"){
        if(connection.bandwidth > 10){
         connection.type = 'wifi';
       }else if(connection.bandwidth > 2){
         connection.type = '3g';
       }else if(connection.bandwidth > 0){
         connection.type = '2g';
       }else if(connection.bandwidth == 0){
         connection.type = 'none';
       }else{
         connection.type = 'unknown';
       }
     }
    
    var html = 'Type : '+connection.type_text;
    html += '
    Bandwidth : '+connection.bandwidth;
    html += '
    isOnline : '+navigator.onLine;
    return html;
    }
    
    
  • 相关阅读:
    UOJ 【UR #5】怎样跑得更快
    【TJOJIHEOI2016】求和
    CF 932E Team Work
    【BZOJ2159】Crash的文明世界
    Luogu P4707 重返现世
    Luogu P3175 [HAOI2015]按位或
    【BZOJ3930】选数
    nginx 学习
    如何解决 react-create-app 里面的 no-unused-vars ?
    随时更新web html 项目页面,查看手机等其他移动设备的几种方法?
  • 原文地址:https://www.cnblogs.com/embaobao/p/10720847.html
Copyright © 2011-2022 走看看