常用的js與OC的交互方式:
1、js給OC傳值方式一(使用JavaScriptCore.framework框架,實現(xiàn)UIWebViewDelegate代理協(xié)議)
代碼實現(xiàn)如下:
-(void)webViewDidFinishLoad:(UIWebView *)webView{
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"btnClick"] = ^{
NSArray *values = [JSContext currentArguments];
for (id obj in values) {
NSLog(@"%@", obj);
}
};
}
//其中btnClick是js的函數(shù)名,values數(shù)組是js函數(shù)的參數(shù),也就是js要給OC傳的值
- js給OC傳值方法二(使用自定義URL方式)
代碼如下:
function btnClick()
{
var str1=document.getElementById("text1").value;
var str2=document.getElementById("text2").value;
// "objc://"為自定義協(xié)議頭;
// str1&str2為要傳給OC的值,以":/"作為分隔
window.location.href="objc://"+":/"+str1+":/"+str2;
}
其中objc:為自定義的協(xié)議頭,str1和str2是js要傳給OC的值,用“:/”分隔;
在OC中UIWebView的代理方法shouldStartLoadWithRequest:navigationType:中拿到此URL,根據(jù)objc:協(xié)議頭去找到傳過來的參數(shù)
代碼如下:
//遵守UIWebViewDelegate代理協(xié)議。
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
//拿到網(wǎng)頁的實時url
NSString *requestStr = [[request.URL absoluteString] stringByRemovingPercentEncoding];
//在url中尋找自定義協(xié)議頭"objc://"
if ([requestStr hasPrefix:@"objc://"]) {
// 以"://"為中心將url分割成兩部分,放進數(shù)組arr
NSArray *arr = [requestStr componentsSeparatedByString:@"://"];
NSLog(@"%@",arr);
//取其后半段
NSString *paramStr = arr[1];
NSLog(@"%@",paramStr);
//以":/"為標(biāo)識將后半段url分割成若干部分,放進數(shù)組arr2,此時arr2[0]為空,arr2[1]為第一個傳參值,arr2[2]為第二個傳參值,以此類推
NSArray *arr2 = [paramStr componentsSeparatedByString:@":/"];
NSLog(@"%@",arr2);
//取出參數(shù),進行使用
if (arr2.count) {
NSLog(@"有參數(shù)");
NSString *str1 = arr2[1];
NSString *str2 = arr2[2];
}else{
NSLog(@"無參數(shù)");
}
return NO;
}
return YES;
}
//具體解釋代碼中已經(jīng)注釋
1、OC與js交互
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div style="margin-top: 20px">
<h2>JS與OC交互</h2>
<input type="button" value="喚起本地方法(call)" onclick="tianbai.call()">
</div>
<div>
<input type="button" value="喚起getCall:(NSString *)callString傳值" onclick="call()">
</div>
<script>
var call = function()
{
var callInfo = JSON.stringify({"jianshu": "http://www.itdecent.cn/users/55c8fdc3c6e7/latest_articles"});
//js調(diào)用了OC的getCall方法
tianbai.getCall(callInfo);
}
var Callback = function(str)
{
alert(str);
}
var alerCallback = function()
{
alert('成功');
}
</script>
</body>
</html>
上面html的代碼:建立了兩個button
第一個button綁定了 tianbai.call() 方法,這里 tianbai 是一個對象,這個對象的作用下面OC代碼中會說明, tianbai.call() 代表 tianbai 對象調(diào)用 call() 方法
第二個button綁定了 call() 的方法,調(diào)用的是下面JavaScript中的 call() 方法,在 JavaScript 的 call() 里面,定義一個 callInfo 參數(shù),方法中 tianbai.getCall(callInfo) 代表 tianbai 對象調(diào)用 getCall 方法并傳參數(shù) callInfo ,下面兩個方法是OC調(diào)用JavaScript方法,其中Callback傳回str,alerCallback為OC僅調(diào)用JavaScript方法!
OC代碼
- (void)webViewDidFinishLoad:(UIWebView *)webView {
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//將self賦給js中得tianbai對象,tianbai對象調(diào)用的js的call方法,這樣self就可以調(diào)用js的call方法
self.jsContext[@"tianbai"] = self;
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"異常信息:%@", exceptionValue);
};
}
//js中也有call方法
- (void)call{
NSLog(@"call");
// 之后在回調(diào)js的方法Callback把內(nèi)容傳出去
JSValue *Callback = self.jsContext[@"Callback"];
//傳值給web端,js的alert會彈出提示框
[Callback callWithArguments:@[@"喚起本地OC回調(diào)完成"]];
}
- (void)getCall:(NSString *)callString{
NSLog(@"Get:%@", callString);
// 成功回調(diào)js的方法Callback
JSValue *Callback = self.jsContext[@"alerCallback"];
[Callback callWithArguments:nil];
// 直接添加提示框
// NSString *str = @"alert('OC添加JS提示成功')";
// [self.jsContext evaluateScript:str];
}