使用WKWebView替换UIWebView之H5不改代码调用原生方法的原理

在使用UIWebView时，H5调用原生方法之一，H5代码需要写

window.nativeFunction('string');这里只说window.nativeFunction('string');

原生代码借助UIWebView+TS_JavaScriptContext这个第三方库，需要写

#import "UIWebView+TS_JavaScriptContext.h"

#pragma mark TSWebViewDelegate

- (void)webView:(UIWebView *)webView didCreateJavaScriptContext:(JSContext *)jsContext

{

    self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

   

   self.jsContext[@"nativeFunction"] = ^(NSString* str) {

       NSLog(@"%@",str);

   };

}

原理是给H5的window对象创建了一个nativeFunction的方法。

 

------------------------------------------------分割线------------------------------------------------------

 

在使用WKWebView时，H5调用原生方法，H5代码需要写

window.webkit.messageHandlers.nativeFunctionWK.postMessage('string');

原生代码需要写

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

    WKUserContentController *contentController = [[WKUserContentController alloc]init];

    [contentController addScriptMessageHandler:self name:@"nativeFunctionWK"];

    configuration.userContentController = contentController;

    WKWebView *wkWebView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, 320, 568) configuration:configuration];

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

    

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

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

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

    

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

        //处理H5传过来的数据

    }

}

    原理是给H5的window对象创建了一个webkit.messageHandlers.nativeFunctionWK.postMessage的方法

 

------------------------------------------------分割线------------------------------------------------------

现在将UIWebView换成WKWebView,H5的代码不变还是调用window.nativeFunction('string');

WKWebView就需要实现nativeFunction方法，nativeFunction方法再调用webkit.messageHandlers.nativeFunctionWK.postMessage的方法。

需要在创建WKWebView前面加一段代码

    NSString *scriptSource = @"setTimeout(function(){window.nativeFunction=function(strstr){window.webkit.messageHandlers.nativeFunctionWK.postMessage(strstr)};}, 1)";

    WKUserScript *script = [[WKUserScript alloc] initWithSource:scriptSource injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];

    [configuration.userContentController addUserScript:script];

    

修改后的使用WKWebView，H5调用原生方法,原生需要写的代码

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

    WKUserContentController *contentController = [[WKUserContentController alloc]init];

    [contentController addScriptMessageHandler:self name:@"nativeFunctionWK"];

    configuration.userContentController = contentController;

    

    NSString *scriptSource = @"setTimeout(function(){window.nativeFunction=function(strstr){window.webkit.messageHandlers.nativeFunctionWK.postMessage(strstr)};}, 1)";

    WKUserScript *script = [[WKUserScript alloc] initWithSource:scriptSource injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];

    [configuration.userContentController addUserScript:script];

    

    WKWebView *wkWebView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, 320, 568) configuration:configuration];