WebView js判断是否联网后页面自动跳转

WebView js判断是否联网后页面自动跳转

本人讲解一向是不大清楚的，很可能还会让大家越看越不明白，这样的情况下就多多体谅啦。。。需求：webview和js的交互，在离线进入app时，打开显示的页面是A页面，如果这时变成在线了，那么应该自动跳转到B页面；如果本来就是在在线时打开的app，那么久会直接进入B页面，就算此时变成离线，也不会变到A页面。（假如：WebView myWebView，A页面url为AURL，B页面url为BURL）问题：js端已写有网络判断，在ios使用时是直接监听就可以，但是android端js写的判断无效，这个问题我也不明白是为什么，所以判断网络这个就落到了android手上。分析：网络判断这块内容网上有很多，也就那么几句话而已，但是怎么才能实现自动跳转呢？
两个实现方式： 一、用定时器；二、用广播判断是否联网： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16publicclassConnectNet{publicstaticbooleanisNetworkConnected(Contextcontext){// 判断是否联网ConnectivityManagercwjManager=(ConnectivityManager)context.getSystemService(Context.CONNECTIVITY_SERVICE);NetworkInfoinfo=cwjManager.getActiveNetworkInfo();if(info!=null&&info.isAvailable()){// 如果联网，返回truereturntrue;}else{// 不联网，返回falsereturnfalse;}}}方案一：定时器handle和Runnable的运用，就可以进行更新页面 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18Handlerhandler=newHandler();// 构建Runnable对象，在runnable中更新页面Runnablerunnable=newRunnable(){@Overridepublicvoidrun(){// 更新页面// 如果联网if(ConnectNet.isNetworkConnected(context)){myWebView.loadUrl(AURL);handler.removeCallbacks(this);}else{myWebView.loadUrl(BURL);handler.postDelayed(this,2000);// 每两秒执行一次runnable}}};handler.post(runnable);缺点： 用定时器这么更新，会有一个很大的问题，就是因为是每两秒就执行一次，所以会每两秒就刷新一次页面，也就会一直在刷新，因为是loadUrl，所以屏幕就会一直闪，一直再跳动，这个问题没法解决，所以我还是选择用了广播，也是很简单的一种方法，最早朋友提示我也是用这个就好，只是自己太烂了，知道广播怎么写，却不知道怎么把该写的内容加入进去，也是突然之间想到的：方案二：广播将主程序中的myWebView设为public static，以便后面之间调用，应该有其他更好的方法的，我就不去写了
然后主程序就只需判断首次登录时的是否联网，进入哪个页面就好：1 2 3 4 5 6if(ConnectNet.isNetworkConnected(context)){myWebView.loadUrl(BURL);}else{myWebView.loadUrl(AURL);}然后就是如何写广播啦： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26publicclassNetCheckReceiverextendsBroadcastReceiver{privatestaticfinalStringTAG="NetCheckReceiver";// android 中网络变化时所发的Intent的名字publicstaticfinalStringnetACTION="android.net.conn.CONNECTIVITY_CHANGE";@OverridepublicvoidonReceive(Contextcontext,Intentintent){// TODO Auto-generated method stubif(intent.getAction().equals(netACTION)){Log.e(TAG,"ACTION:"+intent.getAction());// Intent中ConnectivityManager.EXTRA_NO_CONNECTIVITY这个关键字表示着当前是否连接上了网络// true 代表网络断开 false 代表网络没有断开booleanisBreak=intent.getBooleanExtra(ConnectivityManager.EXTRA_NO_CONNECTIVITY,false);Log.e(TAG,"is break:"+isBreak);if(isBreak){Log.d(TAG,"onTeceive:NOT connected, stopping Updaterservice");}else{Log.d(TAG,"onReceive: connected, starting UpdaaterService");context.myWebView.loadUrl(BURL);}}}}好了，这样就完成了，不过一定要记得广播的话要在AndroidManifest里面进行注册：1 2 3 4 5还有判断网络的：1

判断原理： javascript是前端开发的主要语言，我们可以通过编写javascript程序来判断浏览器的类型及版本。javascript判断浏览器类型一般有两种办法，一种是根据各种浏览器独有的属性来分辨，另一种是通过分析浏览器的useragent属性来判断的。在许多情况下，值判断出浏览器类型之后，还需判断浏览器版本才能处理兼容性问题，而判断浏览器的版本一般只能通过分析浏览器的useragent才能知道。 浏览器类型 ⑴浏览器特有属性 ⑵根据useragent 浏览器版本 ⑴根据useragent 对于手机浏览器判断 1.如何判断是否为移动终端 利用正则match， 匹配navigator.useragent是否含有字符串applewebkit*****mobile 安卓qq浏览器hd版 只有applewebkit 2手机语言版本的判断 使用navigator.browserlanguage 便可得出windows phone语言版本， 当然可恶的小小手机语言版本也有兼容性的差异，兼容mozilla，以及applewebkit内核的浏览器访问其语言版本，它会列出 navigator.language code： <script type="text/javascript"> var browser={ versions:function(){ var u = navigator.useragent, app = navigator.appversion; return { //移动终端浏览器版本信息 trident: u.indexof('trident') > -1, //ie内核 presto: u.indexof('presto') > -1, //opera内核 webkit: u.indexof('applewebkit') > -1, //苹果、谷歌内核 gecko: u.indexof('gecko') > -1 && u.indexof('khtml') == -1, //火狐内核 mobile: !!u.match(/applewebkit.*mobile.*/), //是否为移动终端 ios: !!u.match(/\(i[^;]+;( u;)? cpu.+mac os x/), //ios终端 android: u.indexof('android') > -1 || u.indexof('linux') > -1, //android终端或uc浏览器 iphone: u.indexof('iphone') > -1 , //是否为iphone或者qqhd浏览器 ipad: u.indexof('ipad') > -1, //是否ipad webapp: u.indexof('safari') == -1 //是否web应该程序，没有头部与底部 }; }(), language:(navigator.browserlanguage || navigator.language).tolowercase() } document.writeln("语言版本: "+browser.language); document.writeln(" 是否为移动终端: "+browser.versions.mobile); document.writeln(" ios终端: "+browser.versions.ios); document.writeln(" android终端: "+browser.versions.android); document.writeln(" 是否为iphone: "+browser.versions.iphone); document.writeln(" 是否ipad: "+browser.versions.ipad); document.writeln(navigator.useragent); </script> 比较特别的地方 uc浏览器没有安卓报头，只返回：linux ，这里粗略的根据linux来判断是安卓（前提必须满足是移动终端，uc这点是满足的） 安卓qq浏览器hd版检测的结果是：mac， safari