WKWebView和WebView与JS的交互方式

WKWebView和WebView与JS的交互方式

UIWebView与JS的交互方式

一、 OC调用JS

直接调用苹果提供的API

- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

使用方式：

OC部分：

[self.webView stringByEvaluatingJavaScriptFromString:@"add(1,2)"];

JS部分：

function add(a,b) {
    return a+b;
}

二、 JS调用OC

OC处理JS的时机在UIWebView的代理方法内

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

使用方式：

JS部分：

function btnClick1() {
    location.href = "jsCallBack://method_?param1&param2"
}

OC部分：

NSString *schem = webView.request.URL.scheme;
    if ([schem containsString:@"jsCallBack://"]) {
        //action...
        return NO;
    }

WKWebView与JS的交互方式

一、OC调用JS

调用苹果提供的API

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

使用方式：

OC部分：

[self.wkWebView evaluateJavaScript:@"playSount()" completionHandler:nil];

JS部分：

function playSount() {
    //playSount...
}

二、JS调用OC

OC部分：

这种使用方式比较麻烦一些

1. 在创建WKWebView时，需要将被JS调用的方法注册进去

   //创建WKWebViewConfiguration文件
       WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
       config.preferences.minimumFontSize = 10.f;
       [config.userContentController addScriptMessageHandler:self name:@"playSound"];
   //创建WKWebView类
       WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
   

2. 在WKScriptMessageHandler代理方法中监听JS的调用

   #pragma mark - WKScriptMessageHandler
   - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    
       if ([message.name isEqualToString:@"playSound"]) {
           [self playSound];
       }
   }
   

JS部分：

//JS响应事件
function btnClick() {
    window.webkit.messageHandlers.playSound.postMessage(null);
}

利用JavaScriptCore库，WebView与JS的交互

一、OC调用JS

self.jsContent = [[JSContext alloc] init];
 
NSString *js = @"function add(a,b) {return a + b}";
[self.jsContent evaluateScript:js];
JSValue *jsValue = [self.jsContent[@"add"] callWithArguments:@[@2,@3]];

二、JS调用OC

self.jsContent = [[JSContext alloc] init];
self.jsContent[@"add"] = ^(int a, int b){
    NSLog(@"a+b = %d",a+b);
};
 
[self.jsContent evaluateScript:@"add(10,20)"];

三、JS直接访问OC对象方法与属性

1. 首先定义一个协议，这个协议遵守JSExport协议

   @protocol JSExportTest <JSExport>
   @property (nonatomic, assign) NSInteger sum;
   JSExportAs(add, - (NSInteger)add:(int)a b:(int)b);
    
   @end
   

   其中JSExportAs()是系统提供的宏，用来声明在JS环境中方法add与OC环境中方法- (NSInteger)add:(int)a b:(int)b相对应

2. 创建一类，遵守JSExportTest协议，并实现它的方法与属性

   @interface JSProtolObj : NSObject <JSExportTest>
    
   @end
    
   @implementation JSProtolObj
    
   @synthesize sum = _sum;
    
   - (NSInteger)add:(int)a b:(int)b {
    
   	return a+b;
   }
    
   - (void)setSum:(NSInteger)sum {
    
   	_sum = sum;
   }
    
   @end
   

3. 使用方法：

   self.jsContent = [[JSContext alloc] init];
    
   self.jsContent.exceptionHandler = ^(JSContext *context, JSValue *exception) {
       [JSContext currentContext].exception = exception;
       NSLog(@"exception:%@",exception);
   };
    
   self.jsContent[@"OCobj"] = self.jsProtolObj;
   [self.jsContent evaluateScript:@"OCobj.sum = OCobj.add(10,20)"];
   

这三种使用方式可以根据实际情况进行适当使用