IOS与网页JS交互详解及实例
IOS与网页JS交互
随着移动APP的快速迭代开发趋势，越来越多的APP中嵌入了html网页，但在一些大中型APP中，尤其是电商类APP，html页面已经不仅仅满足展示功能，这时html要求能与原生语言进行交互、相互传值。比如携程APP中一个热门景点的网页中，点击某个景点，可以跳转到原生中的该景点详情页控制器。
为此，我整理了三种最常用最便捷有效的OC与JS交互的方式，供大家学习交流。
第一种：JS给OC传值。
1.技术方案：使用JavaScriptCore.framework框架
2.使用场景：网页中代码中的某个方法，比如点击事件方法，将该方法的参数传值给OC，供OC使用。
比如：携程APP中一个热门景点的网页中，有很多个热门景点，点击某个景点的图片或名称，可以跳转到原生中的该景点详情页控制器。
3.代码实现如下：
OC里要实现的代码：
拖入JavaScriptCore.framework静态库，遵守UIWebViewDelegate代理协议。
在-webViewDidFinishLoad:方法里编写如下代码：
-(void)webViewDidFinishLoad:(UIWebView*)webView{
JSContext*context=[webViewvalueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"passValue"]=^{
NSArray*arg=[JSContextcurrentArguments];
for(idobjinarg){
NSLog(@"%@",obj);
}
};
}
其中passValue是JS的函数名，得到的arg数组里面为JS的passValue函数的参数，即JS要传给OC的参数。
JS里要实现的代码：
functiontestClick()
{
varstr1=document.getElementById("text1").value;
varstr2=document.getElementById("text2").value;
passValue(str1,str2);
}
在需要给OC传值的函数里（例如：testClick（））直接调用passValue（）函数，将值传进去即可。
第二种：JS给OC传值。
1.技术方案：使用自定义url方法，每次点击网页
2.使用场景：网页中代码中的某个方法，比如点击事件方法，将该方法的参数传值给OC，供OC使用。
比如：携程APP中一个热门景点的网页中，有很多个热门景点，点击某个景点的图片或名称，可以跳转到原生中的该景点详情页控制器。
3.代码实现如下：
JS里要实现的代码：
functiontestClick()
{
varstr1=document.getElementById("text1").value;
varstr2=document.getElementById("text2").value;
//"objc://"为自定义协议头;
//str1&str2为要传给OC的值,以":/"作为分隔
window.location.href="objc://"+":/"+str1+":/"+str2;
}
在需要给OC传值的函数里（例如：testClick（））写如上格式的代码。
其中objc://是自定义的协议头，str1与str2为JS要传给OC的值。
OC里要实现的代码：
//遵守UIWebViewDelegate代理协议。
-(BOOL)webView:(UIWebView*)webViewshouldStartLoadWithRequest:(NSURLRequest*)requestnavigationType:(UIWebViewNavigationType)navigationType{
//拿到网页的实时url
NSString*requestStr=[[request.URLabsoluteString]stringByRemovingPercentEncoding];
//在url中寻找自定义协议头"objc://"
if([requestStrhasPrefix:@"objc://"]){
//以"://"为中心将url分割成两部分，放进数组arr
NSArray*arr=[requestStrcomponentsSeparatedByString:@"://"];
NSLog(@"%@",arr);
//取其后半段
NSString*paramStr=arr[1];
NSLog(@"%@",paramStr);
//以":/"为标识将后半段url分割成若干部分，放进数组arr2，此时arr2[0]为空，arr2[1]为第一个传参值，arr2[2]为第二个传参值，以此类推
NSArray*arr2=[paramStrcomponentsSeparatedByString:@":/"];
NSLog(@"%@",arr2);
//取出参数，进行使用
if(arr2.count){
NSLog(@"有参数");
[selfdoSomeThingWithParamA:arr2[1]andParamB:arr2[2]];
}else{
NSLog(@"无参数");
}
returnNO;
}
returnYES;
}
//对JS传来的值进行调用
-(void)doSomeThingWithParamA:(id)paramAandParamB:(id)paramB{
NSLog(@"%@%@",paramA,paramB);
}
第三种：利用第三方库实现JS与OC的相互传值。
1.技术方案：使用WebViewJavascriptBridge三方库
2.使用场景：网页中代码中的某个方法，比如点击事件方法，将该方法的参数传值给OC，供OC使用。
比如：携程APP中一个热门景点的网页中，有很多个热门景点，点击某个景点的图片或名称，可以跳转到原生中的该景点详情页控制器。
或者将原生中的用户信息传递给网页，以便其个性化展示
3.代码实现如下：
OC传值给JS
JS里需要实现的代码：
functionsetupWebViewJavascriptBridge(callback){
if(window.WebViewJavascriptBridge){returncallback(WebViewJavascriptBridge);}
if(window.WVJBCallbacks){returnwindow.WVJBCallbacks.push(callback);}
window.WVJBCallbacks=[callback];
varWVJBIframe=document.createElement('iframe');
WVJBIframe.style.display='none';
WVJBIframe.src='wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function(){document.documentElement.removeChild(WVJBIframe)},0)
}
//调用上面定义的函数
setupWebViewJavascriptBridge(function(bridge){
//OC传值给JS'testJavascriptHandler'为双方自定义好的统一方法名；'data'是OC传过来的值；'responseCallback'是JS接收到之后给OC的回调
bridge.registerHandler('testJavascriptHandler',function(data,responseCallback){
//打印OC传过来的值
log('ObjCcalledtestJavascriptHandlerwith',data)
varresponseData={'JavascriptSays':'Rightbackatcha!'}
log('JSrespondingwith',responseData)
//给OC的回调
responseCallback(responseData)
})
OC里需要实现的代码：
导入第三方库WebViewJavascriptBridge；遵守UIWebViewDelegate；
//设置第三方Bridge是否可用
[WebViewJavascriptBridgeenableLogging];
//关联webView和bridge
_bridge=[WebViewJavascriptBridgebridgeForWebView:web];
[_bridgesetWebViewDelegate:self];
//OC给JS传值，双方自定义一个统一的方法名'testJavascriptHandler'；data里即为要传过去的值
[_bridgecallHandler:@"testJavascriptHandler"data:@{@"年龄":@"20"}];
JS传值给OC
JS里需要实现的代码：
//点击网页上一个按钮时
callbackBt.onclick=function()
{
varstr1=document.getElementById("text1").value;
varstr2=document.getElementById("text2").value;
//JS给OC传值。'passValue'为双方自定义的统一方法名；'str1'&'str2'为要传的值；response为OC收到后给JS的回调
bridge.callHandler('passValue',{str1,str2},function(response){
})
}
OC里需要实现的代码：
导入第三方库WebViewJavascriptBridge；遵守UIWebViewDelegate；
//设置第三方Bridge是否可用
[WebViewJavascriptBridgeenableLogging];
//关联webView和bridge
_bridge=[WebViewJavascriptBridgebridgeForWebView:web];
[_bridgesetWebViewDelegate:self];
//js给oc传值.'passValue'为双方自定义的统一方法名；'data'为JS传过来的值；'responseCallback'为OC收到值后给JS返回的回调
[_bridgeregisterHandler:@"passValue"handler:^(iddata,WVJBResponseCallbackresponseCallback){
//打印js传过来的值
NSLog(@"%@",data);
//返回给js的值
responseCallback(@"收到了");
}];
需要注意的是：不论哪方给哪方传值，传值的方法名称与对应接收值的方法名称要保持一致。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！