美文网首页
js oc交互

js oc交互

作者: 青春已给下一代 | 来源:发表于2020-03-16 12:58 被阅读0次

混合开发的重要性不言而喻,一个移动端开发的了解前端开发是一个趋向,总之每个人都向往成为一个全栈工程师,废话不多说,直接上主题

一、交互(UIWebView)

1、OC调用JS

 (1)OC调用代码

  [self.webView stringByEvaluatingJavaScriptFromString:@"ocCallJSFunction({'name':'xiaoxiao'})"];

 (2)JS代码

function ocCallJSFunction(data) {

var obj = eval(data);

alert(obj.name);

}

2、JS调用OC

(1)OC代码

  - (void)webViewDidFinishLoad:(UIWebView *)webView {

      JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

      context[@"jsCallOCFunction"] = ^() {        

          NSLog(@"JS调用OC成功");

          NSArray *args = [JSContext currentArguments];

          for (JSValue *jsVal in args) {

              NSLog(@"%@", jsVal.toDictionary);

          }

      };

  }

 (2)JS调用代码

  </script>

var message = {

'method' : 'hello',

'param1' : 'dada',

};

jsCallOCFunction(message);

  <script>

二、交互(WKWebView)

1、OC调用JS

  (1)OC调用代码

    [self.wkWebView evaluateJavaScript:@"ocCallJSFunction({'name':'xiaoxiao'})" completionHandler:^(id _Nullable obj, NSError * _Nullable error) {

            NSLog(@"evaluateJavaScript, obj = %@, error = %@", obj, error);

      }];

 (2)JS代码

function ocCallJSFunction(data) {

var obj = eval(data);

alert(obj.name);

}

2、JS调用OC

(1)OC代码

  // 初始化WKWebView

  WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];

     [config.userContentController addScriptMessageHandler:self name:@"jsCallOCFunction"];

      WKWebView *wkWebView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:config];

  #pragma mark - WKScriptMessageHandler

  - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {

      NSLog(@"name = %@",message.name);

      NSLog(@"body = %@",message.body);

      NSLog(@"frameInfo = %@",message.frameInfo);

  }

 (2)JS调用代码

  </script>

var message = {

'method' : 'hello',

'param1' : 'dada',

};

window.webkit.messageHandlers.jsCallOCFunction.postMessage(message);

  <script>

三、交互(WebViewJavascriptBridge)

功能总结:

OC调JS调用成功,JS可以回调数据到OC

JS调OC调用成功,OC可以回调数据到JS

1、OC调用JS

  (1)OC调用代码

  _bridge = [WebViewJavascriptBridge bridgeForWebView:wkWebView];

  id data = @{@"name" : @"xiaoxiao"};

     [_bridge callHandler:@"ocCallJSFunction" data:data responseCallback:^(id response) {

          NSLog(@"这里是OC调用JS成功后,JS回调的参数:%@", response);

     }];

(2)JS代码

  </script>

// 注册JS方法供OC调用

bridge.registerHandler('ocCallJSFunction', function(data, responseCallback) {

var obj = eval(data);

alert(obj.userId);

var responseData = { 'code':'200' }

responseCallback(responseData)

})

  <script>

2、JS调用OC

(1)OC代码

  [_bridge registerHandler:@"jsCallOCFunction" handler:^(id data, WVJBResponseCallback responseCallback) {

        NSLog(@"JS传过来的参数: %@", data);

        responseCallback(@"这是JS调用OC成功后,OC回调的参数");

    }];

 (2)JS调用代码

// JS调用OC注册的方法

bridge.callHandler('jsCallOCFunction', {'name':'dada'}, function responseCallback(responseData) {

alert(responseData);

})

相关文章

  • OC与JS交互

    OC与JS交互前言 OC与JS交互之UIWebView OC与JS交互之WebViewJavascriptBrid...

  • oc 与js 的原生交互

    参考 总评: oc 与js的交互,1.有原生的方式,oc 调js简单,js调oc 麻烦(协议拦截"实现的交互方式)...

  • js iOS原生交互

    一、交互(UIWebView) 1、OC调用JS (1)OC调用代码 (2)JS代码 2、JS调用OC (1)OC...

  • iOS(OC\swift)-javascript交互

    OC与JS的交互 OC调用JS GitHub这是我写的一个简单OC与JS的交互,这个demo使用的是JavaScr...

  • UIWebView之JS与OC交互(三)

    前言 基于UIWebView的JS与OC交互(一)之JSExport基于UIWebView的JS与OC交互(二)之...

  • WKWebView OC与JS交互 同步返回值

    WKWebView OC与JS交互 同步返回值 以下主要讲WKWebView中OC与JS交互,UIWebView这...

  • UIWebView之JS与OC交互(二)

    前言 基于UIWebView的JS与OC交互(一)之JSExport基于UIWebView的JS与OC交互(二)之...

  • WKWebView之JS与OC交互

    前言 基于UIWebView的JS与OC交互(一)之JSExport基于UIWebView的JS与OC交互(二)之...

  • 无标题文章

    OC与JS的交互 这个demo主要做了以下几个功能: js调用oc,并传值 oc调用js 并传值 js调用oc,...

  • OC 与 JS 交互之 WKWebView

    上一篇讲了借助 JavaScriptCore 进行 OC 与 JS 的交互,链接请戳⬇️OC 与 JS 交互之 J...

网友评论

      本文标题:js oc交互

      本文链接:https://www.haomeiwen.com/subject/gclgehtx.html