IOS开发之——网页-原生与JS相互调用(03)

一 概述

之前介绍过——Android原生和WebView相互调用，本文介绍IOS原生和JS相互调用

加载本地网页文件原生调用JSJS调用原生 二 加载本地网页文件 2.1 index.html

    
    
    


    以下是网页内容---------------
    
    IOS调用js代码

    IOS调用js代码并传递参数

    JS调用IOS代码

    JS调用IOS代码并传递参数

    

2.2 加载网页 代码

@interface ViewController ()
@property (strong, nonatomic) IBOutlet WKWebView *wkWebView;
@end

- (void)viewDidLoad {
    [super viewDidLoad];

    NSString *htmlPath=[[NSBundle mainBundle]pathForResource:@"index" ofType:@"html"];
    NSURL *url=[NSURL fileURLWithPath:htmlPath];
    NSURLRequest *request=[NSURLRequest requestWithURL:url];    
    [self.wkWebView loadRequest:request];  
}

效果图

说明：

上面的两个按钮是iOS原生按钮，点击调用JS方法下面的是WebView网页组件 三 原生调用JS 3.1 过程说明 原生IOS：webView通过执行evaluateJavaScript:@"IOS调用JS方法名"调用JS文件中同名的方法JS(html)：执行IOS调用JS方法名同样的方法 3.2 代码 OC中按钮方法

//OC调用JS无参方法
- (IBAction)ocInvocJS:(UIButton *)sender
{
    [self.wkWebView evaluateJavaScript:@"IOSCallJs()" completionHandler:^(id _Nullable, NSError * _Nullable error) {
        
    }];
}
//OC调用JS有参方法
- (IBAction)ocInvocJSParams:(UIButton *)sender
{
    [self.wkWebView evaluateJavaScript:@"IOSCallJsWithArgs('aa')" completionHandler:^(id _Nullable, NSError * _Nullable error) {
        
    }];
}

JS：方法

3.3 效果图

四 JS调用原生 4.1 过程说明 IOS原生：给WebView设置WKUserContentControllerIOS原生：WKUserContentController通过addScriptMessageHandler设置JS调用原生的方法代理和方法名， name: @"jsInvokeOCMethod"IOS原生：遵循WKScriptMessageHandler协议，并实现userContentController方法(接收JS返回给IOS原生的结果)JS页面：window.webkit.messageHandlers.jsInvokeOCMethod.postMessage(‘Javascript invoke OC’);IOS原生：userContentController方法中通过判断message.name知道是执行的哪个方法 4.2 代码 OC中的方法

//1-遵循WKScriptMessageHandler协议
@interface ViewController ()
@property (strong, nonatomic) IBOutlet WKWebView *wkWebView;
@end

//2-设置WKUserContentController及JS调用IOS中的方法
- (void)viewDidLoad {
    [super viewDidLoad];

    NSString *htmlPath=[[NSBundle mainBundle]pathForResource:@"index" ofType:@"html"];
    NSURL *url=[NSURL fileURLWithPath:htmlPath];
    
    NSURLRequest *request=[NSURLRequest requestWithURL:url];
    
    WKUserContentController* userCC = self.wkWebView.configuration.userContentController;
    [userCC addScriptMessageHandler: self name: @"jsInvokeOCMethod"];//不带参数的调用
    [userCC addScriptMessageHandler:self name:@"jsInvokeOCMethodArgs"];
    
    [self.wkWebView loadRequest:request];
    
}
//3-接收JS返回给IOS原生的结果
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
    if ([message.name isEqualToString: @"jsInvokeOCMethod"]) {
            NSLog(@"MessageBody: %@", message.body);
    }else if ([message.name isEqualToString: @"jsInvokeOCMethodArgs"]){
        NSLog(@"MessageBody: %@", message.body);
    }
}

JS中的方法

4.3 效果

点击JS调用IOS代码时，打印结果

2022-03-23 20:38:36.704783+0800 WKWebViewJS[30340:492946] MessageBody: Javascript invoke OC

点击JS调用IOS代码并传参数时，打印结果

2022-03-23 20:39:47.354903+0800 WKWebViewJS[30340:492946] MessageBody: Javascript invoke OC Args:ios

五 参考(OC中完整代码)

#import "ViewController.h"

@interface ViewController ()
@property (strong, nonatomic) IBOutlet WKWebView *wkWebView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    NSString *htmlPath=[[NSBundle mainBundle]pathForResource:@"index" ofType:@"html"];
    NSURL *url=[NSURL fileURLWithPath:htmlPath];
    
    NSURLRequest *request=[NSURLRequest requestWithURL:url];
    
    WKUserContentController* userCC = self.wkWebView.configuration.userContentController;
    [userCC addScriptMessageHandler: self name: @"jsInvokeOCMethod"];//不带参数的调用
    [userCC addScriptMessageHandler:self name:@"jsInvokeOCMethodArgs"];
    
    [self.wkWebView loadRequest:request];
    
}
//OC调用JS无参方法
- (IBAction)ocInvocJS:(UIButton *)sender
{
    [self.wkWebView evaluateJavaScript:@"IOSCallJs()" completionHandler:^(id _Nullable, NSError * _Nullable error) {
        
    }];
}
//OC调用JS有参方法
- (IBAction)ocInvocJSParams:(UIButton *)sender
{
    [self.wkWebView evaluateJavaScript:@"IOSCallJsWithArgs('aa')" completionHandler:^(id _Nullable, NSError * _Nullable error) {
        
    }];
}
#pragma mark--js-oc
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
    if ([message.name isEqualToString: @"jsInvokeOCMethod"]) {
            NSLog(@"MessageBody: %@", message.body);
    }else if ([message.name isEqualToString: @"jsInvokeOCMethodArgs"]){
        NSLog(@"MessageBody: %@", message.body);
    }
}
@end