javascript检测是否联网的实现代码

最简单粗暴的方式就是加载网络资源，JS文件或者图片文件。

代码如下:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
typeof window.jQuery === "undefined" // return false or ture

用jQuery变量来检测是否联网

function doConnectFunction() {
  return true;
}
function doNotConnectFunction() {
  return false;
}

 var i = new Image();
i.onload = doConnectFunction;
i.onerror = doNotConnectFunction;
i.src = 'http://su.bdimg.com/static/superplus/img/logo_white.png?d=' + escape(Date());

加载网络资源的问题就是检测的互联网，如果是局域网检测是无能为力了。
这时候需要一个更好的解决方案，就要用到navigator.onLine，这个属性比较坑的就是浏览器兼容，chrome、Safari 都完美支持，IE7以上是支持的。火狐和IE6比较坑，只有在浏览器“脱机状态”下才返回false，其他都返回true。掐了网线都是true，Opera直接不支持了。

所以还得加一个兼容方法：给location.hostname地址发一个http头请求，代码如下：

var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );
var status;
xhr.open( "HEAD", "//" + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false );
 try {
  xhr.send();
  return ( xhr.status >= 200 && xhr.status < 300 || xhr.status === 304 );
 } catch (error) {
  return false;
 }

里面一个要注意的就是open方法的第三个参数要传false，必须是同步请求。

总结：支持navigator.onLine的浏览器就用navigator.onLine，不支持的就发一个http头请求。

原创文章，转载请注明： 转载自前端开发

赞 (0)

相关推荐

  • 如何判断软件程序是否联网 联网状态提示信息Android实现

    如何判断软件程序是否联网 联网状态提示信息Android实现

    在项目中,经常需要判断是否有网络连接.最近学习了如何判断软件是否联网,如果没有联网,弹出提示信息,连接网络. 效果: (1)联网情况下: (2)不联网情况下: (3)点击"检测设置": 源码下载:http://xiazai.jb51.net/201605/yuanma/MyApplication(jb51.net).rar 判断我们的软件是否联网,看代码吧: /** * 检测网络连接 * * @param con * @return */ public boolean isNetwor

  • Android中判断手机是否联网实例

    本文实例讲述了Android中判断手机是否联网的方法,分享给大家供大家参考.具体步骤如下: 首先在AndroidManifest.xml中添加与连接网络相关的权限: 复制代码 代码如下: <uses-permission android:name="android.permission.INTERNET"></uses-permission>  <uses-permission android:name="android.permission.A

  • js实现双向链表互联网机顶盒实战应用实现

    上实战代码: linkedlistnode.js 节点类 复制代码 代码如下: /* * 链表节点 */ Dare.LinkedListNode = function () { this.data = null;//数据域 this.prev = null;//前驱 this.next = null;//后驱 }; Dare.extend(Dare.LinkedListNode, Dare); Dare.LinkedListNode.prototype.getValue = function (

  • Android sdcard实现图片存储 、联网下载

    本文实例介绍了sdcard存储图片下载简单操作,分享给大家供大家参考,具体内容如下 步骤 -- 在配置清单添加完联网权限后 1.res/layout界面布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_

  • php银联网页支付实现方法

    本文实例讲述了php银联网页支付实现方法.分享给大家供大家参考.具体分析如下: 这里介绍的银联WAP支付功能,仅限消费功能. 1. PHP代码如下: 复制代码 代码如下: <?php namespace common\services; class UnionPay {     /**      * 支付配置      * @var array      */     public $config = [];     /**      * 支付参数,提交到银联对应接口的所有参数      * @

  • Android互联网访问图片并在客户端显示的方法

    Android互联网访问图片并在客户端显示的方法

    本文实例讲述了Android互联网访问图片并在客户端显示的方法.分享给大家供大家参考,具体如下: 1.布局界面 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:

  • 通过JS判断联网类型和连接状态的实现代码

    中国的移动网络环境复杂,为了给用户带去更好访问体验,开发者希望能了解用户当前的联网方式,然后给用户一个符合当前网络环境的请求结果. W3C的规范中给出了一个方法来获得现在的网络状态navigator.connection:根据Working Draft 29 November 2012协议规范我们可以从接口中获得bandwidth(带宽,M/s)和metered两个参数的值:还提供了一个监听方法,来时刻监听接入环境的变化情况.现实中我们发现很多浏览器并没有返回bandwidth值,而且遵守了Wo

  • Android中判断是否联网实现代码

    下面的方法返回false表示网络不通 // 检测网络 public static boolean checkNetworkAvailable(Context context) { ConnectivityManager connectivity = (ConnectivityManager) context .getSystemService(Context.CONNECTIVITY_SERVICE); if (connectivity == null) { return false; } el

  • javascript判断机器是否联网的2种方法

    在很多场景下,只有机器已经联网以后,web应用才能启动.如果没有联网,就会提示错误.. 但是机器有时候要重启. 如果机器重启后,立刻启动web应用的话,可能,机器上的网络服务还没有准备好. 特别是windows7,启动网络服务需要好几秒,这个时候怎么办呢? 之前尝试过几种方法: 比如 通过ping来判断, 但是ping需要有一个非本机的ip地址. 这个不是很通用 比如监控某个端口是否已经被占用,但是光端口占用,也不能说明网络已经启动了. 另一个方面,如果是web应用的话,最好是在前端判断,比如用

  • android判断phonegap是否联网且加载super.loadUrl网址

    复制代码 代码如下: public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.setIntegerProperty("splashscreen", R.drawable.splash); ConnectivityManager cwjManager=(ConnectivityManager)getSystemService(Context.CONNECTIVI

随机推荐