OC与JS交互之WKWebView篇

ViewController.m中调用本地index.html文件,代码如下:

#import "ViewController.h"
#import 

@interface ViewController () 

@property (nonatomic, strong) WKWebView *webView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    config.preferences.minimumFontSize = 18;
    
    _webView.multipleTouchEnabled = YES;
    _webView.allowsBackForwardNavigationGestures = YES;
    _webView.navigationDelegate = self;
    _webView.UIDelegate = self;
    
    self.webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height/2) configuration:config];
    [self.view addSubview:self.webView];
    
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
    NSURL *baseURL = [[NSBundle mainBundle] bundleURL];
    [self.webView loadHTMLString:[NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil] baseURL:baseURL];
    
    WKUserContentController *userCC = config.userContentController;
    // JS调用OC添加处理脚本
    [userCC addScriptMessageHandler:self name:@"showMobile"];
    [userCC addScriptMessageHandler:self name:@"showName"];
    [userCC addScriptMessageHandler:self name:@"showSendMsg"];
}

// 网页加载完成之后调用JS代码才会执行，因为这个时候html页面已经注入到webView中并且可以响应到对应方法

- (IBAction)btnClick:(UIButton *)sender {
    if (!self.webView.loading) {
        // 调用网页中alertMobile()方法
        if (sender.tag == 123) {
            [self.webView evaluateJavaScript:@"alertMobile()" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
                NSLog(@"response is:%@ %@",response,error);
            }];
        }
         // 调用网页中alertName(msg)方法
        if (sender.tag == 234) {
            [self.webView evaluateJavaScript:@"alertName('小红')" completionHandler:nil];
        }
        // 调用网页中alertSendMsg(num,msg)方法
        if (sender.tag == 345) {
            [self.webView evaluateJavaScript:@"alertSendMsg('18870707070','周末爬山真是件愉快的事情')" completionHandler:nil];
        }
    } else {
        NSLog(@"the view is currently loading content");
    }
}

#pragma mark - WKScriptMessageHandler

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    NSLog(@"name = %@,body = %@",message.name ,message.body);
    /*
     判断传过来的message.name是否等于showMobile,如果是就执行网页中这个方法function btnClick1() {
     window.webkit.messageHandlers.showMobile.postMessage(null)
     }
     **/
    if ([message.name isEqualToString:@"showMobile"]) {
        [self showMsg:@"我是下面的小红 手机号是:18870707070"];
    }
    /*
     判断传过来的message.name是否等于showName,如果是就执行网页中这个方法function btnClick2() {
     window.webkit.messageHandlers.showName.postMessage(null)
     }
     **/
    if ([message.name isEqualToString:@"showName"]) {
        NSString *info = [NSString stringWithFormat:@"你好 %@, 很高兴见到你",message.body];
        [self showMsg:info];
    }
    /*
     判断传过来的message.name是否等于showSendMsg,如果是就执行网页中这个方法function btnClick3() {
     window.webkit.messageHandlers.showSendMsg.postMessage(null)
     }
     **/
    if ([message.name isEqualToString:@"showSendMsg"]) {
        NSArray *array = message.body;
        NSString *info = [NSString stringWithFormat:@"这是我的手机号: %@, %@ !!",array.firstObject,array.lastObject];
        [self showMsg:info];
    }
}

- (void)showMsg:(NSString *)msg {
    [[[UIAlertView alloc] initWithTitle:nil message:msg delegate:nil cancelButtonTitle:nil otherButtonTitles:@"OK", nil] show];
}

// 调用网页中clear()方法
- (IBAction)clear:(id)sender {
    [self.webView evaluateJavaScript:@"clear()" completionHandler:nil];
}

@end

index.html代码如下:

    
    
        
        
        
        
        
        
        
    

    
    
        


        

            小黄：13300001111
        
        


        

        

            小红的手机号
        
        

        
        

        

            打电话给小红
        
        

        
        

        

            发短信给小红
        


    

图