JS与OC交互

UIWebView拦截URL

1. 原理：

   
   
   
   
   1. js通过加载url方式被webView拦截，这时候看如果是自己定义的scheme请求就不让webView继续加载请求，否则就继续加载请求。
   
   
   2. webView看加载的请求的host是哪种host进行分别处理。
   
   
   3. 处理oc代码。
   
   
   4. 之后调用stringByEvaluatingJavascriptFromString调用js代码。
   
   
   
   



2. 注意：

   
   
   
   
   1. js调用oc属于异步方式
   
   
   2. oc调用js属于同步方式，且必须在主线程加载，如果js代码比较耗时那么可能会卡顿主线程
   
   
   
   



3. 代码地址

   
   

UIWebview利用jsc库

1. 原理:

   
   
   
   
   1. html调用方法：
      
      function locationClick() {
      
      getLocation(‘A’,‘B’,‘C’);
      
      }
   
   
   2. oc中delegate回调：
   
   

   - (void)webViewDidFinishLoad:(UIWebView *)webView{
JSContext *cOntext= [self valueForKeyPath:@"documentView.webView.mainFrame.JavascriptContext"];
}

   

   
   
   3. 通过分析context[@“getLocation”]来判断方法名。
   
   
   4. 通过NSArray *arrArgs = [JSContext currentArguments];获取参数
   
   
   
   



2. 注意：

   
   
   
   
   1. js执行时候会进入context的回调，该回调block是在子线程中的。如果更细ui要在主线程。
   
   
   
   



3. 代码地址

   
   

WKWebView拦截URL

1. 原理：

   
   
   
   
   1. js通过加载url方式被webView拦截，这时候看如果是自己定义的scheme请求就不让webView继续加载请求，否则就继续加载请求。
   
   
   2. webView看加载的请求的host是哪种host进行分别处理。
   
   
   3. 处理oc代码。
   
   
   4. 之后调用evaluateJavascript调用js代码。
   
   
   
   



2. 注意：

   
   
   
   
   1. js调用oc属于异步方式
   
   
   2. oc调用js属于同步方式，且必须在主线程加载，如果js代码比较耗时那么可能会卡顿主线程
   
   
   3. WKWebView有个处理js弹窗的代理方法，这个方法必须要实现，如果不实现js的弹窗将会无效。
   
   
   
   



3. WKWebView和UIWebView的比较

   
   
   
   
   1. wk更节省内存
   
   
   2. wk加载速度刚快
   
   
   3. wk解决了内存泄露问题
   
   
   4. wk刚好适配了ios8+
   
   
   
   



4. 代码地址

   
   

WKWebView messageHandle方式

1. 原理：
   
   
   
   1. js通过调用方法window.webkit.messageHandlers.getLocation.postMessage({A:‘a’,B:‘b’});其中getLocation为name，{A:‘a’,B:‘b’}相当于参数
   
   
   2. oc通过 [self.webView.configuration.userContentController addScriptMessageHandler:self name:obj];相当于注册监听
   
   
   3. oc会进入回调userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message。
   
   
   4. 通过分析message.name来判断是js调用的那个方法，通过分析message.body来获取参数。
   
   
   
   

代码地址

可以利用三方框架实现交互

1. WebViewJavascriptBridge支持UIWebView，WKWebView


2. 利用这个框架可以实现oc与js互调

可以利用前端框架

1. RN可以实现


2. Cordova可以实现

webView实现全包裹

1. ios要想做到内容全包裹，必须借助js，不像android…


2. js获取内容高度方法为：

CGFloat height = [[webView stringByEvaluatingJavascriptFromString:@"document.body.scrollHeight"] floatValue];