iOS与Javascript交互实战

转自：http://blog.youkuaiyun.com/woaifen3344/article/details/42742893

Swift版与JS交互实战篇：

http://mp.weixin.qq.com/s?__biz=MzIzMzA4NjA5Mw==&mid=214070747&idx=1&sn=57b45fa293d0500365d9a0a4ff74a4e1#rd

OC版与JS交互实战篇：

http://mp.weixin.qq.com/s?__biz=MzIzMzA4NjA5Mw==&mid=214063688&idx=1&sn=903258ec2d3ae431b4d9ee55cb59ed89#rd

因为项目需要做一个活动，而这个活动的信息是源于HTML5写的，而这个操作网页的过程上，

是需要到与原生APP这边交互的，因为这就增加了一个需求，那就是与JS交互。

目前很流行的库有WebviewJavaScriptBridge和OVGap，这两个库都是让webview与JS建立起一条桥梁，

这样就可以相互通信了。

花了两天的时间，反反复复地研究了WebviewJavaScriptBridge和OVGap这两个库，也在网上搜索了很多的

相关博客看，可是都没有满足我的需求。网上的教程几乎都是webview给调用JS，使用系统提供的方法，这是

想学Easy就可以做到的，但是如果想让JS调用我们的原生的方法，那就不容易了，就需要一条桥梁，在JS响应的

时候能回调OC的方法。这两个库都是可以满足我们的，但是在JS端需要添加对应的JS，对于前者，还需要把响应的

方法放到桥梁内，如：

[objc] view plain copy

print ?

1. functionconnectWebViewJavascriptBridge(callback){
2. if(window.WebViewJavascriptBridge){
3. callback(WebViewJavascriptBridge)
4. }else{
5. document.addEventListener('WebViewJavascriptBridgeReady',function(){
6. callback(WebViewJavascriptBridge)
7. },false)
8. }
9. }
11. connectWebViewJavascriptBridge(function(bridge){
12. varuniqueId=1
13. functionlog(message,data){
14. varlog=document.getElementById('log')
15. varel=document.createElement('div')
16. el.className='logLine'
17. el.innerHTML=uniqueId+++'.'+message+':<br/>'+JSON.stringify(data)
18. if(log.children.length){log.insertBefore(el,log.children[0])}
19. else{log.appendChild(el)}
20. }
21. bridge.init(function(message,responseCallback){
22. log('JSgotamessage',message)
23. vardata={'JavascriptResponds':'Wee!'}
24. log('JSrespondingwith',data)
25. responseCallback(data)
26. })
28. bridge.registerHandler('testJavascriptHandler',function(data,responseCallback){
29. log('ObjCcalledtestJavascriptHandlerwith',data)
30. varresponseData={'JavascriptSays':'Rightbackatcha!'}
31. log('JSrespondingwith',responseData)
32. responseCallback(responseData)
33. })
35. varbutton=document.getElementById('buttons').appendChild(document.createElement('button'))
36. button.innerHTML='SendmessagetoObjC'
37. button.onclick=function(e){
38. e.preventDefault()
39. vardata='HellofromJSbutton'
40. log('JSsendingmessage',data)
41. bridge.send(data,function(responseData){
42. log('JSgotresponse',responseData)
43. })
44. }
46. document.body.appendChild(document.createElement('br'))
48. varcallbackButton=document.getElementById('buttons').appendChild(document.createElement('button'))
49. callbackButton.innerHTML='FiretestObjcCallback'
50. callbackButton.onclick=function(e){
51. e.preventDefault()
52. log('JScallinghandler"testObjcCallback"')
53. bridge.callHandler('testObjcCallback',{'foo':'bar'},function(response){
54. log('JSgotresponse',response)
55. })
56. }
57. })
58. </script>

connectWebViewJavascriptBridge

这个方法是必须的，而响应要放在这个方法中，这样对安卓端可能会中影响，于是放弃了这个库的使用。

将下来是使用OVGap这个库。

使用这个库前，需要给HTML5中引入对方的脚本，叫ovgap.js，可到Github下载：

[javascript] view plain copy

print ?

1. ;(function(){
3. varrequire,define;
5. (function(){
6. varmodules={},
7. //StackofmoduleIdscurrentlybeingbuilt.
8. requireStack=[],
9. //MapofmoduleID->indexintorequireStackofmodulescurrentlybeingbuilt.
10. inProgressModules={},
11. SEPERATOR=".";
13. functionbuild(module){
14. varfactory=module.factory,
15. localRequire=function(id){
16. varresultantId=id;
17. //Itsarelativepath,solopoffthelastportionandaddtheid(minus"./")
18. if(id.charAt(0)==="."){
19. resultantId=module.id.slice(0,module.id.lastIndexOf(SEPERATOR))+SEPERATOR+id.slice(2);
20. }
21. returnrequire(resultantId);
22. };
23. module.exports={};
24. deletemodule.factory;
25. factory(localRequire,module.exports,module);
26. returnmodule.exports;
27. }
29. require=function(id){
30. if(!modules[id]){
31. throw"module"+id+"notfound";
32. }elseif(idininProgressModules){
33. varcycle=requireStack.slice(inProgressModules[id]).join('->')+'->'+id;
34. throw"Cycleinrequiregraph:"+cycle;
35. }
36. if(modules[id].factory){
37. try{
38. inProgressModules[id]=requireStack.length;
39. requireStack.push(id);
40. returnbuild(modules[id]);
41. }finally{
42. deleteinProgressModules[id];
43. requireStack.pop();
44. }
45. }
46. returnmodules[id].exports;
47. };
49. define=function(id,factory){
50. if(modules[id]){
51. throw"module"+id+"alreadydefined";
52. }
54. modules[id]={
55. id:id,
56. factory:factory
57. };
58. };
60. define.remove=function(id){
61. deletemodules[id];
62. };
64. define.moduleMap=modules;
65. })();
69. define("ov_gap",function(require,exports,module){
71. varovGap={
72. callbackId:Math.floor(Math.random()*2000000000),
73. callbacks:{},
74. commandQueue:[],
75. groupId:Math.floor(Math.random()*300),
76. groups:{},
77. listeners:{},
78. invoke:function(cmd,params,onSuccess,onFail){
79. if(!cmd)cmd="defaultCommand";
80. if(!params)params={};
81. this.callbackId++;
82. this.callbacks[this.callbackId]={
83. success:onSuccess,
84. fail:onFail
85. };
86. varrurl="ovgap://"+cmd+"/"+JSON.stringify(params)+"/"+this.callbackId;
87. document.location=rurl;
88. },
89. dispatchCommand:function(cmd,params,onSuccess,onFail){
90. if(!cmd)cmd="defaultCommand";
91. if(!params)params={};
92. this.callbackId++;
93. this.callbacks[this.callbackId]={
94. success:onSuccess,
95. fail:onFail
96. };
97. varcommand=cmd+"/"+JSON.stringify(params)+"/"+this.callbackId;
98. this.commandQueue.push(command);
99. },
100. fetchNativeCommands:function(){
101. varjson=JSON.stringify(this.commandQueue);
102. this.commandQueue=[];
103. returnjson;
104. },
105. activate:function(){
106. document.location="ovgap://ready";
107. },
108. //returngroupID
109. createGroup:function(){
110. this.groupId++;
111. this.groups[this.groupId]=[];
112. returnthis.groupId;
113. },
114. dispatchCommandInGroup:function(cmd,params,onSuccess,onFail,groupId){
115. if(!this.groups[groupId])returnfalse;
117. if(!cmd)cmd="defaultCommand";
118. if(!params)params={};
119. this.callbackId++;
120. this.callbacks[this.callbackId]={
121. success:onSuccess,
122. fail:onFail
123. };
124. varcommand=cmd+"/"+JSON.stringify(params)+"/"+this.callbackId;
125. this.groups[groupId].push(command);
126. returntrue;
127. },
128. activateGroup:function(groupId){
129. if(!this.groups[groupId])returnfalse;
130. document.location="ovgap://group/"+groupId;
131. },
132. fetchNativeGroupCommands:function(groupId){
133. if(!this.groups[groupId])return[];
134. varjson=JSON.stringify(this.groups[groupId]);
135. this.groups[groupId]=[];
136. returnjson;
137. },
138. callbackSuccess:function(callbackId,params){
139. try{
140. ovGap.callbackFromNative(callbackId,params,true);
141. }catch(e){
142. console.log("Errorinerrorcallback:"+callbackId+"="+e);
143. }
144. },
145. callbackError:function(callbackId,params){
146. try{
147. ovGap.callbackFromNative(callbackId,params,false);
148. }catch(e){
149. console.log("Errorinerrorcallback:"+callbackId+"="+e);
150. }
151. },
152. callbackFromNative:function(callbackId,params,isSuccess){
153. varcallback=this.callbacks[callbackId];
154. if(callback){
155. if(isSuccess){
156. callback.success&&callback.success(callbackId,params);
157. }else{
158. callback.fail&&callback.fail(callbackId,params);
159. }
160. deleteovGap.callbacks[callbackId];
161. };
162. },
163. addGapListener:function(listenId,onSuccess,onFail){
164. if(!listenId||!onSuccess||!onFail)return;
165. this.listeners[listenId]={
166. success:onSuccess,
167. fail:onFail
168. };
169. },
170. removeListener:function(listenId){
171. if(!this.listeners[listenId])return;
172. this.listeners[listenId]=null;
173. },
174. triggerListenerSuccess:function(listenId,params){
175. if(!this.listeners[listenId])return;
176. varlistener=this.listeners[listenId];
177. listener.success&&listener.success(listenId,params);
178. },
179. triggerListenerFail:function(listenId,params){
180. if(!this.listeners[listenId])return;
181. varlistener=this.listeners[listenId];
182. listener.fail&&listener.fail(listenId,params);
183. }
184. };
186. module.exports=ovGap;
188. });
190. window.ov_gap=require("ov_gap");
192. })();

给按钮添加一个点击事件，回调如下：

[javascript] view plain copy

print ?

1. functiononButtonClick(){
2. //下面是我需要处理的事，处理完之后
3. alert('这里我是要处理一些事的，如果有需要的话。');
5. //这里是回调我们前端与后端商量好的方法
6. //activityList是oc中的方法
7. window.ov_gap.invoke("activityList",null,success,fail);
8. }

这样就从JS回调到了IOS端的OC方法，然后处理我们想做的事。

可是这两个库都需要添加这些东西，做HTML5的人可不愿意，因为这样的话，对于iOS的处理是一种，对于安卓和WP呢？又得写一份吗？

于是我又去寻找别的库，有一个叫apache cordova的库，是支持ios,Android,wp的，可是太大了，又是英文的，安装也很困难，学习成本太高，

于是看了看就放弃了，这么大的库，给我们带来的可不一定是好处多于动坏处啊。

转了一圈又回到了原生的，有一个库叫JavaScriptCore，这个是IOS7以后才开放的API，这可以极大的简化了我们的需求，非常的简单，

我们只需要注入一个方法，就可以在JS中调用此方法来跟原生的OC交互。

首先得加入库

[javascript] view plain copy

print ?

1. #import<JavaScriptCore/JavaScriptCore.h>

JSContext这个可是关键。

[objc] view plain copy

print ?

1. //webView对象
2. @property(nonatomic,strong,readonly)UIWebView*webView;
3. @property(nonatomic,strong,readonly)JSContext*jsContext;

下面是在webview加载完成后， 关联JS与OC:

[objc] view plain copy

print ?

1. -(void)webViewDidFinishLoad:(UIWebView*)webView{
2. [_activityViewstopAnimating];
4. [selfdismiss];
5. if(_jsContext==nil){
6. //1.
7. _jsContext=[webViewvalueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
9. //2.关联打印异常
10. _jsContext.exceptionHandler=^(JSContext*context,JSValue*exceptionValue){
11. context.exception=exceptionValue;
12. DDLogVerbose(@"异常信息：%@",exceptionValue);
13. };
15. _jsContext[@"activityList"]=^(NSDictionary*param){
16. DDLogVerbose(@"%@",param);
17. };
19. //Mozilla/5.0(iPhone;CPUiPhoneOS10_10likeMacOSX)AppleWebKit/600.1.4(KHTML,likeGecko)Mobile/12B411
20. iduserAgent=[webViewstringByEvaluatingJavaScriptFromString:@"navigator.userAgent"];
21. DDLogVerbose(@"%@",userAgent);
22. }
23. }

上面

activityList是商定好的方法名称，在JS中写法：

[javascript] view plain copy

print ?

1. <inputtype="button"value="测试log"οnclick="activityList({'tytyty':'hehe'})"/>

在点击的时候，直接回调是可以的。

那么经过这两天的摸索，学习到了很多的知识。

写DEMO的过程中，由于 后台并没有提供好HTML5页面的交互来测试，需要自己写，

我这里是使用apache服务器，在本地创建一个HTML5页面，自己写一些JS来测试的，

如果大家不知道怎么写JS，其实是很简单的，上w3cschool看一看，就明白了，so easy!!!!

之所以要写下这篇文章，是因为我发现在网上搜索出来的文章中，都是相互复制的，看来看去都是

一样的东西而且还都是OC调JS的代码，实在是不快。

写下的点滴，希望对大家有用。

另外，也许我上面所讲的一些关于OVGap和WebviewJavaScriptBridge的知识是有不正确的地方，还请指出来，

你们的反馈，会是对我最大的帮助，谢谢