iOS Webview与js的交互
2016-09-23 15:37
453 查看
常用的js与OC的交互方式:
js给OC传值方式一(使用JavaScriptCore.framework框架,实现UIWebViewDelegate代理协议)
代码实现如下
//其中btnClick是js的函数名,values数组是js函数的参数,也就是js要给OC传的值。
2. js给OC传值方法二(使用自定义URL方式)
代码如下:
其中objc:为自定义的协议头,str1和str2是js要传给OC的值,用“:/”分隔;
在OC中UIWebView的代理方法shouldStartLoadWithRequest:navigationType:中拿到此URL,根据objc:协议头去找到传过来的参数
代码如下:
OC与js相互交互
转自 http://blog.csdn.net/qq_30513483/article/details/51674244
html代码
上面html的代码:建立了两个button
第一个button绑定了 tianbai.call() 方法,这里 tianbai 是一个对象,这个对象的作用下面OC代码中会说明, tianbai.call() 代表 tianbai 对象调用 call() 方法
第二个button绑定了 call() 的方法,调用的是下面JavaScript中的 call() 方法,在 JavaScript 的 call() 里面,定义一个 callInfo 参数,方法中 tianbai.getCall(callInfo) 代表 tianbai 对象调用 getCall 方法并传参数 callInfo ,下面两个方法是OC调用JavaScript方法,其中Callback传回str,alerCallback为OC仅调用JavaScript方法!
OC代码
js给OC传值方式一(使用JavaScriptCore.framework框架,实现UIWebViewDelegate代理协议)
代码实现如下
-(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的函数名,values数组是js函数的参数,也就是js要给OC传的值。
2. js给OC传值方法二(使用自定义URL方式)
代码如下:
function btnClick() { var str1=document.getElementById("text1").value; var str2=document.getElementById("text2").value; // "objc://"为自定义协议头; // str1&str2为要传给OC的值,以":/"作为分隔 window.location.href="objc://"+":/"+str1+":/"+str2; }
其中objc:为自定义的协议头,str1和str2是js要传给OC的值,用“:/”分隔;
在OC中UIWebView的代理方法shouldStartLoadWithRequest:navigationType:中拿到此URL,根据objc:协议头去找到传过来的参数
代码如下:
//遵守UIWebViewDelegate代理协议。 -(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{ //拿到网页的实时url NSString *requestStr = [[request.URL absoluteString] stringByRemovingPercentEncoding]; //在url中寻找自定义协议头"objc://" if ([requestStr hasPrefix:@"objc://"]) { // 以"://"为中心将url分割成两部分,放进数组arr NSArray *arr = [requestStr componentsSeparatedByString:@"://"]; NSLog(@"%@",arr); //取其后半段 NSString *paramStr = arr[1]; NSLog(@"%@",paramStr); //以":/"为标识将后半段url分割成若干部分,放进数组arr2,此时arr2[0]为空,arr2[1]为第一个传参值,arr2[2]为第二个传参值,以此类推 NSArray *arr2 = [paramStr componentsSeparatedByString:@":/"]; NSLog(@"%@",arr2); //取出参数,进行使用 if (arr2.count) { NSLog(@"有参数"); NSString *str1 = arr2[1]; NSString *str2 = arr2[2]; }else{ NSLog(@"无参数"); } return NO; } return YES; }
OC与js相互交互
转自 http://blog.csdn.net/qq_30513483/article/details/51674244
html代码
<!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.jianshu.com/users/55c8fdc3c6e7/latest_articles"}); //js调用了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 对象调用 call() 方法
第二个button绑定了 call() 的方法,调用的是下面JavaScript中的 call() 方法,在 JavaScript 的 call() 里面,定义一个 callInfo 参数,方法中 tianbai.getCall(callInfo) 代表 tianbai 对象调用 getCall 方法并传参数 callInfo ,下面两个方法是OC调用JavaScript方法,其中Callback传回str,alerCallback为OC仅调用JavaScript方法!
OC代码
- (void)webViewDidFinishLoad:(UIWebView *)webView { self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; //将self赋给js中得tianbai对象,tianbai对象调用的js的call方法,这样self就可以调用js的call方法 self.jsContext[@"tianbai"< ab80 /span>] = self; self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) { context.exception = exceptionValue; NSLog(@"异常信息:%@", exceptionValue); }; } //js中也有call方法 - (void)call{ NSLog(@"call"); // 之后在回调js的方法Callback把内容传出去 JSValue *Callback = self.jsContext[@"Callback"]; //传值给web端,js的alert会弹出提示框 [Callback callWithArguments:@[@"唤起本地OC回调完成"]]; } - (void)getCall:(NSString *)callString{ NSLog(@"Get:%@", callString); // 成功回调js的方法Callback JSValue *Callback = self.jsContext[@"alerCallback"]; [Callback callWithArguments:nil]; // 直接添加提示框 // NSString *str = @"alert('OC添加JS提示成功')"; // [self.jsContext evaluateScript:str]; }
具体的解释代码中已经注释了
相关文章推荐
- iOS webView和JS简单交互处理
- iOS ios与js交互,获取webview完整url,title,获取元素并赋值跳转
- iOS WebView JS 交互
- iOS开发日记27-WebView与JS的交互
- ios 点击webview获取图片url (js交互)
- iOS 8 WkWebView 网页的配置和前进,后退,js 交互和进度条的加载
- IOS WebView OC与JS 交互 WebViewJavascriptBridge
- iOS开发,webView加载图片, js交互, 点击图片放大
- iOS开发-WebView与JS的交互
- ios与js交互,获取webview完整url,title,获取元素并赋值跳转
- iOS webView 与js交互
- IOS Webview JS交互之事件拦截获取
- iOS中webview和js的交互
- iOS解析---WebView和js交互原理
- iOS webview 和 js 交互
- ios与js交互,获取webview完整url,title,获取元素并赋值跳转
- iOS解析---WebView和js交互原理
- ios webview与JS的交互
- ios与js交互,获取webview完整url,title,获取元素并赋值跳转
- iOS开发使用WebViewJavascriptBridge实现OC与JS交互