preface

WKWebView is a browser control that comes out of iOS8. It’s used to replace UIWebView. Now in 2020, apple doesn’t recommend using UIWebView anymore, so we need to replace it with WKWebView. And OC can give the gitHub address to the callback WKJSBridge

WKWebView was only improved in iOS9, so it is recommended to set the project to support iOS9 minimum

1.WKWebView calls the JS method

WKWebView calls JS methods by executing JS code directly

EvaluateJavaScript, the WK method in iOS, is the js code that executes

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;
Copy the code

There’s a similar method in UIWebview, so I won’t go into it too much here

2.JS calls the WKWebView method

JS call WKWebView is implemented by WKScriptMessageHandler protocol

OC Code

WKUserContentController * userContent = [[WKUserContentController alloc]init];
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
configuration.userContentController = userContent;
WKUserScript *usrScript = [[WKUserScript alloc] initWithSource:[ZLJSBridge handlerJS] injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];
[userContent addUserScript:usrScript];
[userContent addScriptMessageHandler:self name:@"ZLJSBridge"];
 _wkWebView = [[WKWebView alloc]initWithFrame:[UIScreen mainScreen].bounds configuration:configuration];
 _wkWebView.navigationDelegate = self;
 _wkWebView.UIDelegate = self;
Copy the code

JS Code

let messsage = 'name' : 'lllllin'
window.webkit.messageHandlers.ZLJSBridge.postMessage(message);
Copy the code

The iOS method in WKScriptMessageHandler protocol accepts the name message.name passed by addScriptMessageHandler as the name message.body passed by JS

- (void)userContentController:(WKUserContentController *)userContentController
      didReceiveScriptMessage:(WKScriptMessage *)message
{
    if ([message.name isEqualToString:@"ZLJSBridge"])
    {
        NSLog(@"% @",message.body); }}Copy the code

3. JS calls the WKWebView method and WKWebView calls back to JS

At the beginning of the article, plugin in ZLjsbridge. js has been attached to Demo to define the class name of OC

CallBackID: callBackID + (void)getNativeInfo:(NSDictionary *)params  callBackID:(NSString *)callBackID; NSString *getNativeInfoCBid; // Call back @property (nonatomic, copy); /// @param Response callback parameter /// @param wkWebview callback wkWebview + (void)getNativeCallBack:(id)response wkWwebView:(WKWebView *)wkWebview;Copy the code
+ (void)getNativeInfo:(NSDictionary *)params callBackID:(nonnull NSString *)callBackID
{
    [ZLJSCoreBridge sharedInstance].getNativeInfoCBid = callBackID;
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"Arguments passed by js"message:[NSString stringWithFormat:@"% @",params] preferredStyle:UIAlertControllerStyleAlert];
    [alertController addAction:[UIAlertAction actionWithTitle:@"Sure" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
        
    }]];
    [[[UIApplication sharedApplication] windows].firstObject.rootViewController presentViewController:alertController animated:YES completion:^{
        
    }];
    NSLog(@"getNativeInfo %@ callBackID:%@",params,callBackID);
}
+ (void)getNativeCallBack:(id)response wkWwebView:(WKWebView *)wkWebview
{
    [self callBackWithCallBackID:[ZLJSCoreBridge sharedInstance].getNativeInfoCBid callParams:response webView:wkWebview];
}
Copy the code

+ (void)getNativeInfo:(NSDictionary *)params callBackID:(NSString *)callBackID;

GetNativeInfo indicates that the callBackID spelled after the method name exposed to JS is a fixed parameter written in demo. For details, see zlJsbridge. m

JS Code

var params = {
    'name': 'hello world jack!!! '}; //getNativeInfo is the convention method name params is the parameter res is the callback content to jsbridge.callapi ("getNativeInfo", params, res => {
    document.getElementById('div2').innerHTML = res;
});
Copy the code

Do the QQ group 52181885 for the reading APP

QQ group 227866345