WKWebView与JS的交互方式

WKWebView与JS的交互方式

一，OC调用JS写的web页面

调用苹果提供的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写的web页面调用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);

}

受用的一篇

下面这三个方法根据方法前面的字面意思就能区分记住！

runJavaScriptAlert 方法注意点

1.在JS端调用alert函数时，会触发此代理方法。

2.JS端调用alert时所传的数据可以通过message,打印message信息读取出JS端给你的信息。

3.在原生得到结果后，需要回调给JS，通过completionHandler 回调给JS

4.completionHandler 回调的参数和返回值都是空/**

下面这三个方法根据前面的字面意思就能区分记住！

*/

// runJavaScriptAlert

// 在JS端调用alert函数时，会触发此代理方法。

// JS端调用alert时所传的数据可以通过message,打印message信息读取出JS端给你的信息。

// 在原生得到结果后，需要回调给JS，通过completionHandler 回调给JS

// completionHandler 回调的参数和返回值都是空

-(void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler

{

    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"alert"message:@"JS调用alert"preferredStyle:UIAlertControllerStyleAlert];

    [alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

    }]];

    [self presentViewController:alert animated:YES completion:NULL];

    NSLog(@"%@", message);

}

runJavaScriptTextInput 注意点

1.要求用户输入一段文字

3.在原生输入得到文本内容后，通过completionHandler回调给JS

4.大家注意这个回调的completionHandler参数是字符串

// 要求用户输入一段文本

// 在原生输入得到文本内容后，通过completionHandler回调给JS 大家注意这个回调的completionHandler参数是字符串

-(void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable))completionHandler

{

}

runJavaScriptConfirmPane（ConfirmPane字面意思是确认框）

1.JS端调用confirm函数时，会触发此方法

2.通过message可以拿到JS端所传给我们数据

3.在iOS端显示原生alert得到YES/NO后,通过completionHandler回调给JS端

4.注意这个completionHandler回调的参数是BOOL类型的

-(void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler

{

}