WKWebView与JS的交互原理

写的人比较多，自己亲自写一遍，记录一下！
OC和Swift两个版本，原理比较简单，UI如下：

page.jpg

OC、Swift调用JS方法

JS准备一个方法

//等待native调用的方法
function videoPlay(videoUrl){
    var video = document.getElementById('id-my-video')
    video.setAttribute("src", videoUrl)
    video.play()
}

OC: native去调用 videoPlay(videoUrl)

NSString* url = @"http://muymov.a.yximgs.com/bs2/newWatermark/MTQwMjI4MjU2NDM_zh_4.mp4";

//  必须要有双引号
NSString* method = [NSString stringWithFormat:@"videoPlay(\"%@\")", url];
[self.webView evaluateJavaScript:method completionHandler:^(id _Nullable obj, NSError * _Nullable error) {
    if (error) {
        NSLog(@"%@", error);
    }else{
        NSLog(@"JS方法调用成功");
    }
}];

Swift: native去调用网页方法 videoPlay(videoUrl)

let url = "http://muymov.a.yximgs.com/bs2/newWatermark/MTQwMjI4MjU2NDM_zh_4.mp4"
      
//  必须要有双引号
let method = "videoPlay(\"\(url)\")"
webView.evaluateJavaScript(method) { (obj, error) in
    if let myError = error {
        print(myError)
    }else{
        print("JS方法调用成功")
    }
}

JS调用OC、Swift方法

比如JS需要调用native的 CallApp 方法，那么在需要调用的地方写法如下：

var params = {'url': 'Call APP method "CallApp()"'}
window.webkit.messageHandlers.CallApp.postMessage(params);

按照如下的方法初始化 WKWebView ，调用addScriptMessageHandler: name方法，注册 CallApp方法，如下：

OC:

-(WKWebView *)webView{
    if (!_webView) {
        WKWebViewConfiguration* config = [[WKWebViewConfiguration alloc] init];
        config.allowsInlineMediaPlayback = YES;//可以禁止弹出全屏  网页video标签要加 上playsinline 这个属性
        WKUserContentController* uc = [[WKUserContentController alloc] init];
        config.userContentController = uc;
        [uc addScriptMessageHandler:self name:@"CallApp"];
        [uc addScriptMessageHandler:self name:@"APPVideoPlay"];
        //        其中name参数在JS里的写法如下：
        //        window.webkit.messageHandlers.CallApp.postMessage(params);
        //        就是 messageHandlers 后面的参数
        
        _webView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:config];
        _webView.UIDelegate = self;
    }
    
    return _webView;
}

Swift:

    lazy var webView : WKWebView = {
        let config = WKWebViewConfiguration()
        config.allowsInlineMediaPlayback = true //可以禁止弹出全屏  网页video标签要加上 playsinline 这个属性
        let uc = WKUserContentController()
        config.userContentController = uc
        uc.add(self, name: "CallApp")
        uc.add(self, name: "APPVideoPlay")
        //        其中name参数在JS里的写法如下：
        //        window.webkit.messageHandlers.CallApp.postMessage(params);
        //        就是 messageHandlers 后面的参数
        
        let web = WKWebView(frame: .zero, configuration: config)
        //        webView.frame = view.bounds
        web.uiDelegate = self;
        
        return web
    }()

在 webView 的UIDelegate代理中可以拿到响应

OC:

#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    
    NSLog(@"方法名：%@", message.name);
    NSLog(@"参数：%@", message.body);
}

Swift:

//    MARK:WKScriptMessageHandler
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        
    print("方法名：" + message.name)
    print("参数：\(message.body)")
}

感谢您阅读完毕，如有疑问，欢迎添加QQ:714387953(蜗牛上高速)。
github: https://github.com/yhl714387953/WKWebViewJSBridge
如果有错误，欢迎指正，一起切磋，共同进步
如果喜欢可以Follow、Star、Fork，都是给我最大的鼓励。

最后编辑于：2020.04.28 14:37:28