页面检测网络外网连接- 网页基础模块（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 += '\nBandwidth : '+connection.bandwidth;
html += '\nisOnline : '+navigator.onLine;
return html;
}