WKWebView和WebView与JS的交互方式

灰太狼 2021-09-29 07:30 376阅读 0赞

# 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)"];

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

转载于:https://www.cnblogs.com/cy521/p/10032266.html