如何在 WKWebview 中获取 JS 回调？

Question

I am using UIWebView in iOS, and communicate with js. I use JSContext to get the following js callback:

public typealias jsBridgeFuncAlias = (JSValue)->Void
@objc
protocol WebViewJSExport:JSExport {
var call:jsBridgeFuncAlias?{get}
}
class SAJavaScriptBridge:NSObject,WebViewJSExport{
public var call: jsBridgeFuncAlias?
public init(context:JSContext){
    super.init()
    context.setObject(self, forKeyedSubscript:kBridgeName as (NSCopying & NSObjectProtocol)!)
    self.call = { [unowned self](block:JSValue) in
        self.callNativeMethod(block:block )
    }
}

func callNativeMethod(block:JSValue){   
     block.call(withArguments:nil)  //execute the js callback block in ios native
}

But after migrating to WKWebView , I cannot get js callBack block with this code:

window.webkit.messageHandlers.WKWebView.postMessage(function())

Can anyone help?

Answer 1

try this: window.webkit.messageHandlers.ur function.postMessage(ur object); and when u use wkwebview,u should not use javascripCore;

init config and add u function [config.userContentController addScriptMessageHandler:delegate name:@"u function"];

and when the js call the function,u can get in fun: userContentController:didReceiveScriptMessage:;

Answer 2

I have a simple way to resolve the question, you can cover the function to string, like this

 const person = {
        firstName: "John",
        lastName: "Doe",
        age: 50,
        eyeColor: "blue",
    };

    function postMessage(message, callBack) {
        message.callBack = callBack.toString();
        window.webkit.messageHandlers.Native.postMessage(message);
    }


    document.getElementById("li1").onclick = function () {

        postMessage(person, function (args) {
            console.log('call back is invoked' );
            console.log(args);
        });

    };

In you Native code, you can get the callBack and execute the js string.

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

    if ([message.name isEqualToString:@"Native"]) {

        NSString *callBack = message.body[@"callBack"]; //get callBack
        NSDictionary *dict = @{
            @"key1": @"value1",
            @"key2": @"value2
        }; 

        id data = [NSJSONSerialization dataWithJSONObject:dict options:NSJSONWritingPrettyPrinted error:nil];
        NSString *jsonString = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding]; 
        [_webView evaluateJavaScript:[NSString stringWithFormat:@"(%@)(%@)", callBack, jsonString] completionHandler:^(id _Nullable jsData, NSError * _Nullable error) {

        }];
    }
}

But there is a little problem, you cant't get right this in js string function , this is window .

Answer 3

1st you need to register for the callback -

And then listen for it and handle afterwards -

Check out an article on this topic https://medium.com/john-lewis-software-engineering/ios-wkwebview-communication-using-javascript-and-swift-ee077e0127eb