iOS与JS交互之WKWebView-WKUIDelegate协议

作者 : 开心源码 本文共4304个字,预计阅读时间需要11分钟 发布时间: 2022-05-12 共167人阅读

级别:★★☆☆☆
标签:「iOS与JS交互」「WKWebView与JS交互」「WKUIDelegate」
作者: Xs·H
审校: QiShare团队

先解释下标题:“iOS与JS交互”。iOS指iOS原生代码(文章只有OC示例),JS指WEB前台(不单指JavaScript),交互指JS调使用iOSiOS调使用JS
作者将iOS与JS交互总结成了6种方式,并将逐一详情。目录如下:

  • iOS与JS交互之UIWebView-协议阻拦
  • iOS与JS交互之UIWebView-JavaScriptCore框架
  • iOS与JS交互之UIWebView-JSExport协议
  • iOS与JS交互之WKWebView-协议阻拦
  • iOS与JS交互之WKWebView-WKScriptMessageHandler协议
  • iOS与JS交互之WKWebView-WKUIDelegate协议

本文是对用WKWebView-协议阻拦WKWebView-WKScriptMessageHandler协议实现iOSJS交互的补充。
由于WKWebView的特性。JS在调使用alert()confirm()prompt()方法时没有反应。若要正常用这三个方法,iOS需要实现WKUIDelegate中的三个方法模拟JS的这三个方法。

一、JS调使用iOS:
  • 实现逻辑:点击JS的alert按钮、confirm按钮和prompt按钮,iOS通过对应的方法将数据展现出来。

  • 实现效果:

    JS调使用iOS实现效果

  • JS代码:

//! alert按钮<button onclick = "showAlert()" style = "font-size: 18px;">alert(message)</button>//! confirm按钮<button onclick = "showConfirm()" style = "font-size: 18px;">confirm(message)</button>//! prompt按钮<button onclick = "showPrompt()" style = "font-size: 18px;">prompt(prompt, defaultText)</button>
//! 调使用alert(message)function showAlert() {  alert("js_alertMessage");}//! 调使用confirm(message)  function showConfirm() {    confirm("js_confirmMessage");}//! 调使用prompt(prompt, defaultMessage)  function showPrompt() {    prompt("js_prompt", "js_prompt_defaultMessage");}
  • iOS代码:
//! 导入WebKit框架头文件#import <WebKit/WebKit.h>//! WKWebViewWKUIDelegateController遵守WKUIDelegate协议@interface WKWebViewWKUIDelegateController () <WKUIDelegate>
#pragma mark - WKUIDelegate//! alert(message)- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {        UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"Alert" message:message preferredStyle:UIAlertControllerStyleAlert];    UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {        completionHandler();    }];    [alertController addAction:cancelAction];    [self presentViewController:alertController animated:YES completion:nil];}//! confirm(message)- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler {        UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"Confirm" message:message preferredStyle:UIAlertControllerStyleAlert];    UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {        completionHandler(NO);    }];    UIAlertAction *confirmAction = [UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {        completionHandler(YES);    }];    [alertController addAction:cancelAction];    [alertController addAction:confirmAction];    [self presentViewController:alertController animated:YES completion:nil];}//! prompt(prompt, defaultText)- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString *))completionHandler {        UIAlertController *alertController = [UIAlertController alertControllerWithTitle:prompt message:nil preferredStyle:UIAlertControllerStyleAlert];    [alertController addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {        textField.placeholder = defaultText;    }];    UIAlertAction *confirmAction = [UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {        completionHandler(alertController.textFields[0].text);    }];    [alertController addAction:confirmAction];    [self presentViewController:alertController animated:YES completion:nil];}
  • 实现原理:
    1、JS调使用alert()方法、confirm()方法prompt()方法;
    2、iOS实现WKUIDelegate协议里面的方法,负责上述JS方法的响应;

PS1:JS与iOS方法的对应关系如下:

JS方法WKUIDelegate方法
alert(message)-webView: runJavaScriptAlertPanelWithMessage: initiatedByFrame:completionHandler:
confirm(message)-webView:runJavaScriptConfirmPanelWithMessage:initiatedByFrame:completionHandler:
prompt(prompt, defaultText)-webView:runJavaScriptTextInputPanelWithPrompt:defaultText:initiatedByFrame:completionHandler:

PS2:WKUIDelegate中的三个方法都有completionHandlerblock参数,在iOS实现对应的功能后必需调使用此block完成回调,否则会崩溃。


二、iOS调使用JS:

iOS调使用JS方式与上篇文章一致,都是通过WKWebView的-evaluateJavaScript:completionHandler:方法来实现的。


  • 可从QiShare的Github获取工程源码

关注我们的途径有:
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章:
不一样的React context

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » iOS与JS交互之WKWebView-WKUIDelegate协议

发表回复