iOS-WKWebViewとJavaScriptは相互作用します.

9106 ワード

モバイル端末の開発においては、開発効率を考慮して、ネイティブアプリケーションにWebインターフェースを統合することがあります.これはウェブ開発者が書き終わった後、原生はローディングだけでいいです.しかし、nativeとjsの相互作用の場合もあります.以下は私が相互作用の解決に使う方法と出会いの問題です.
オリジナルのローディングwebインターフェースでは、iOS 8の後に、私たちは2つの選択があります.一つはUICKitのUICBViewで、一つはWebKitのWKWebViewです.WKWebViewはiOS 8の後に発売された新しいwebディスプレイコントロールです.目的も明確です.WKWebViewメモリの消費量はUICWebViewよりかなり少ないです.対照的に、iOS 8の前のバージョンをサポートしていないなら、WKWebViewを選択したほうがいいかもしれません.
雑談は少なく言って、コードをつけて、Demoの中で2種類の方式を含んで、1種は3つの倉庫を借りないで、直接WKWebViewを使って、1種は3つの倉庫を借りるのです.また、本ページでは、nativeとJavascriptの間の相互作用の問題について述べただけで、WKWebViewの使用については、後の文章で引き続き更新される.demoアドレス
方式一:三方倉庫を借りずに、WKWebViewの関連代理を直接使用して、相互作用を行います.(参照demoのNativeフォルダ)

htmlコード(参照demo Native.htmlファイル)


    
    
        
        WKWebViewDemo

native びしjavascript

JSにOCでするをするjavascript

 //JS  OC   
function OCCallJS(msg){
      document.getElementById('div1').innerText = msg ? msg : '     OC   '
      //  OC      js  ，     ，    return
      return 'JS   OC   ，     '
}

OCは、JSにされた OC

をびします.

-(void)click {
        //OC     JS
        [_wkWebView evaluateJavaScript:@"OCCallJS('JS    ')" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
            //response js  OCCallJS    
            NSLog(@"response:%@,error:%@",response,error);
        }];
}

javascript びしnative

OCにJSをするには、びしをとする OC

がである.

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
self.wkWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 20, CGRectGetWidth(self.view.bounds), CGRectGetHeight(self.view.bounds)-120) configuration:config];
self.wkWebView.navigationDelegate = self;
[self.view addSubview:self.wkWebView];
//    ，   HTML      
WKUserContentController *userCC = self.wkWebView.configuration.userContentController;
//JSCallOC, javascript     OC ，
[userCC addScriptMessageHandler:self name:@"JSCallOC"];
[self loadLocalHtmlWithFileName:@"Native"];

JSは、OCにされた javascript

をする.

function btnClick() {
    /**
     * JS    OC，       OC     ，     JS   
     *   ：window.webkit.messageHandlers..postMessage()
     */
    window.webkit.messageHandlers.JSCallOC.postMessage('JS    OC')
}

: をして、WebView JavascriptBridge(demoのJSBridgeフォルダを )をします.

htmlコード( demo JSBridge.htmlファイル)


    
    
        
        WKWebViewDemo

native びしjavascript

JSでOCにびされるをする.

は、まずJSBridge.jsでグローバルな

をする.

//       
var iosBridge = function (callback) {
          if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
          if (window.WVJBCallbacks) { return  window.WVJBCallbacks.push(callback); }
          window.WVJBCallbacks = [callback];
          var WVJBIframe = document.createElement('iframe');
          WVJBIframe.style.display = 'none';
          WVJBIframe.src = 'https://__bridge_loaded__';
          document.documentElement.appendChild(WVJBIframe);
          setTimeout(function() {         
                document.documentElement.removeChild(WVJBIframe) 
          }, 0)
 }

-  `JSBridge.js`      `OC`     。`OC`  `JS`      ，`JS`       ，   ：
   1. `JS`   `OC`     ，            `OC`

    /**
     *    ：bridge.registerHandler("handlerName", function(data,responseData) { ... })
     *@first param: 'OCCallJS',  OC  JS    ，      
     *@second param:     ，  data  OC   ‘OCCallJS’   ，     ， ’responseCallBack‘  JS   OC   ，  ’responseCallBack‘   OC     
    */
     bridge.registerHandler('OCCallJS', function(data,responseCallBack){
            console.log('js is called by oc,data from oc:' + data)
            document.getElementById('div1').innerText = data + '    JS     '
            responseCallBack('  JS     ')
     })

   2. `JS`   `OC`     ，       ,      ，        ，                `nil`

    /**
     *JS     ：bridge.registerHandler("handlerName", function(responseData) { ... })
     *@first param: 'OCCallJS',  OC  JS    ，      
     *@second param:     ，  data  OC   ‘OCCallJS’   ，     ,   null
    */
    bridge.registerHandler('OCCallJS', function (data){
              document.getElementById('div1').innerText = data ? data : 'Objective-C   JS    ，      '
    })

OCは、JSにされたをびす(OCにおいてびしは、JSにされたパラメータとしなければならない.そうでなければエラーがする)OCのエンドメソッドプロトタイプの3つがある.

//1
[bridge callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)callback];
//2
[bridge callHandler:(NSString)handlerName data:(id)data
//3
 [bridge callHandler:(NSString)handlerName]

1.    `JS`    1

/**    1    `OC`    ，  `OC`  `callback`，`JS`    .
     *OC    ：[bridge callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)callback]
     *@first param: 'OCCallJS',  OC   JS   
     *@second param data:      OCCallJS  ，   JS   
     *@third param responseCallback: JS       ，   OC  
     */
     [self.bridge callHandler:@"OCCallJS" data:@"Objective-C   JS    " responseCallback:^(id responseData) {
             NSLog(@"Objective-C JS     ，%@",responseData);
             self.label.text = [NSString stringWithFormat:@"Objective-C JS     ，%@",responseData];
     }];

2.    `JS`     2

/**
     *     OC       
     *OC    ：[bridge callHandler:(NSString*)handlerName data:(id)data] or [bridge callHandler:(NSString*)handlerName]
     *          JS    data   ，  ，  null 
    */
    [self.bridge callHandler:@"OCCallJS" data:@"Objective-C   JS    ，      "]; 
      
    [self.bridge callHandler:@"OCCallJS"];

javascript びしnative

OCにJSをするにはびしがな

/**js     ，    ,     JS
*OC    - (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler
*@first param handlerName: 'JSCallOC',  JS   OC   
*@second param handler: JS  OC   ，  JS      data， OC JS    。
*/
    [self.bridge registerHandler:@"JSCallOC" handler:^(id data, WVJBResponseCallback responseCallback) {
        //  data   nil,       JS  ， responseCallback(nil);
        self.label.text = [NSString stringWithFormat:@"%@,    Objective-C     ",data];
        responseCallback(@"  Objective-C      ");
    }];

JSは、OCにされたをびし、JSにOCのプロトタイプをびすと、3つの

がある.

//1
bridge.callHandler("handlerName")
//2
bridge.callHandler("handlerName", data) 
//3
bridge.callHandler("handlerName", data, function responseCallback(responseData)

の3つののは、それぞれの3つのにする.

//1
 bridge.callHandler('JSCallOC')
//2
 bridge.callHandler('JSCallOC','JS   Objective-C    ')
//3,  OC      ，        ，        ，  js   
bridge.callHandler('JSCallOC','JS   Objective-C    ',function(responseData){
          document.getElementById('div1').innerText = 'JS   Objective-C    ，' + responseData
})

のライブラリであれ、3つのライブラリであれ、nativeがびすがあるjavascriptのは、HTMLにめしなければならないようです. に、のページアプリケーションは、のページアプリケーションが1つのHTMLしかないので、はにコンポーネントされてレンダリングされています.

javascriptがをびしたも、びしにするがあります.

リンク:iOS-WKWebViewとJavaScriptののな

中間部品の実現原理