ios和安卓H5交互桥接
ios交互
demo1(摘自网络)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"> 6 <style> 7 body{ 8 background-color:paleturquoise; 9 } 10 11 button{ 12 border:0; 13 width: 150px; 14 height: 35px; 15 background-color: orangered; 16 color: white; 17 font-size: 16px; 18 border-radius: 6px; 19 } 20 </style> 21 </head> 22 23 <body> 24 <h2>JS调用OC中的方法</h2> 25 <button id="btn">访问OC相册</button> 26 <button id="btn1">调用OC提示窗</button> 27 <p></p> 28 </body> 29 <script> 30 // 这段代码是固定的，必须要放到js中 31 function setupWebViewJavascriptBridge(callback) { 32 if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } 33 if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); } 34 window.WVJBCallbacks = [callback]; 35 var WVJBIframe = document.createElement('iframe'); 36 WVJBIframe.style.display = 'none'; 37 WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'; 38 document.documentElement.appendChild(WVJBIframe); 39 setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0) 40 } 41 42 // 与OC交互的所有JS方法都要在这里注册,才能让OC和JS之间相互调用 43 setupWebViewJavascriptBridge(function(bridge) { 44 45 /* JS给OC提供公开的API, 在OC中可以手动调用此API, 并且可以接收OC中传过来的参数,同时可回调OC */ 46 47 // 获取用户信息 48 bridge.registerHandler('getUserInfo', function(data, responseCallback) { 49 console.log("OC中传递过来的参数:", data); 50 // 把处理好的结果返回给OC 51 responseCallback({"userID":"DX001", "userName":"旋之华", "age":"18", "otherName":"旋之华"}) 52 }); 53 54 // 弹框输出（这里的数据是ios端返回的值） 55 bridge.registerHandler('alertMessage', function(data, responseCallback) { 56 alert(data); 57 }); 58 59 // 动态跳转到京东商城 60 bridge.registerHandler('pushToNewWebSite', function(data, responseCallback) { 61 window.location.href = data.url; 62 }); 63 64 bridge.registerHandler('insertImgToWebPage', function(data, responseCallback) { 65 66 var img = document.createElement('img'); 67 img.src = data.url; 68 img.width = 200; 69 document.body.appendChild(img); 70 71 }); 72 73 74 /* OC给JS提供公开的API, 在JS中可以手动调用此API, 并且可以接收OC中传过来的参数,同时可回调OC */ 75 76 // 调用OC中的打开相册方法（传数据给ios） 77 document.getElementById('btn').onclick = function () { 78 bridge.callHandler('openCamera', {'count':'10张'}, function responseCallback(responseData) { 79 console.log("OC中返回的参数:", responseData) 80 }); 81 }; 82 83 document.getElementById('btn1').onclick = function () { 84 bridge.callHandler('showSheet', '', function responseCallback(responseData) { 85 console.log("OC中返回的参数:", responseData) 86 }); 87 }; 88 }) 89 </script> 90 </html>
demo2
//********************** /*苹果设备回调*/ //注册WebViewJavascriptBridge // 这段代码是固定的，必须要放到js中 function setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); } window.WVJBCallbacks = [callback]; var WVJBIframe = document.createElement('iframe'); WVJBIframe.style.display = 'none'; WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'; document.documentElement.appendChild(WVJBIframe); setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0) } function testClick1(code,msg,page) { //JS代码 // 与OC交互的所有JS方法都要在这里注册,才能让OC和JS之间相互调用 setupWebViewJavascriptBridge(function(bridge) { // 弹框输出（获得返回的数据） bridge.registerHandler('alertMessage', function(data, responseCallback) { if(data.code==0){ $('.tip').html('<span class="gr">注册成功，3秒后自动跳转</span>'); $('.register').unbind('click'); setTimeout(function(){ window.location.href='/Login/index.html'; },3000); }else{ $('.tip').html('<span class="re">'+data.tishi+'</span>'); } }); //JS换行 //获得Button /*苹果方法调用传递数据*/（传递数据给ios） //JS代码调用OC"mpTestObjcCallBack"的Handler,并传递参数{'foo': 'bar'} 如果有回调还会显示出来 bridge.callHandler('mpTestObjcCallBack',{code:code,msg:msg,page:page}, function(response) { console.log('JS获得OC返回的结果：', response); // alert(data); }); }); }
demo2调用
1 var maincode='0', 2 host = window.location.host, 3 mainmsg = {url:'http://'+host,phone:phone,type:1,pwd:pwd,yzm:yzm}, 4 page = 'register';//页面名称 5 testClick1(maincode,mainmsg,page);
安卓交互
参考自
https://github.com/lzyzsd/JsBridge
调用java方法实行
var maincode='0', host = window.location.host, mainmsg = {url:'http://'+host,phone:phone,type:2,pwd:pwd,yzm:yzm}, page = 'register';//页面名称 testClick(maincode,mainmsg,page); /*安卓回调app设备(发消息给安卓)*/ function testClick(code,msg,page) { var data = {code:code,msg:msg,page:page}; window.WebViewJavascriptBridge.send( data , function(responseData) { document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData } ); } //安卓发消息给h5，方法注册 function connectWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener( 'WebViewJavascriptBridgeReady' , function() { callback(WebViewJavascriptBridge) }, false ); } } connectWebViewJavascriptBridge(function(bridge) { /*安卓方调用方法*/ bridge.registerHandler("functionInJs", function(data, responseCallback) { alert(data); var responseData = "Javascript Says Right back aka!"; responseCallback(responseData); }); })
