Detailed explanation of the interaction methods of WKWebView, WebView and JS

Since Xcode8 was released, the compiler began to no longer support iOS 7, so our app has also changed to the minimum support for iOS 8.0. Since it is necessary to interact with the web, we naturally chose to use the new control WKWebView that was launched after iOS 8.0.

Compared with UIWebView, WKWebView has many advantages:

Support more HTML5 features
Up to 60fps scroll refresh frequency and built-in gestures
Safari-compatible JavaScript engine
It has greatly improved performance and stability and takes up less memory. The protocol method and functions are more detailed.
Loading progress, etc.

How UIWebView and JS interact

1. OC calls JS

Directly call the API provided by Apple

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

How to use:

OC part:

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

JS part:

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

Second, JS calls OC

The time when OC handles JS is within the proxy method of UIWebView

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

How to use:

JS part:

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

OC part:

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

How WKWebView and JS interact

1. OC calls JS

Call the API provided by Apple

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

How to use:

OC part:

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

JS part:

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

Second, JS calls OC

OC part:

This way of using is more troublesome

1. When creating a wkWebView, you need to register the method called by js.

//Create WKWebViewConfiguration file WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
  = ;
 [ addScriptMessageHandler:self name:@"playSound"];
//Create WKWebView class WKWebView *webView = [[WKWebView alloc] initWithFrame: configuration:config];

2. Listen to js calls in WKScriptMessageHandler proxy method

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

JS part:

//JS response eventfunction btnClick() { (null);
}

Using JavaScriptCore library, the interaction between WebView and JS

1. OC calls JS

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

Second, JS calls OC

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

Third, JS directly accesses OC object methods and properties

1. First define a protocol, which complies with the JSExport protocol

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

Where JSExportAs() is a macro provided by the system, used to declare that the method add in the JS environment corresponds to the method in the OC environment - (NSInteger)add:(int)a b:(int)b.

2. Create a class, comply with the JSExportTest protocol, and implement it methods and properties

@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. How to use:

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

These three usage methods can be used appropriately according to actual conditions

Summarize

The above is the entire content of this article. I hope that the content of this article has a certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.