WKWebView---JS调用OC方法

一、使用的协议进行简单的介绍

1.在WKWebView中OC和JS交互也非常简单,WebKit的库中有个代理WKScriptMessageHandler就是专门来做交互的。

WKScriptMessageHandler其实就是一个遵循的协议,它能让网页通过JS把消息发送给OC。其中协议方法。

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
2.WKUserContentController有两个核心方法,也是它的核心功能。
1)- (void)addUserScript:(WKUserScript *)userScript;:js注入,即向网页中注入我们的js方法,这是一个非常强大的功能,开发中要慎用。
2)- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;:添加供JS调用OC的桥梁这里的名称对应WKScriptMessage中的名字,多数情况下我们认为它就是方法名。
3.WKScriptMessage,WKScriptMessage就是JS通知OC的数据。其中有两个核心属性用的很多
@property (nonatomic, readonly, copy) NSString *name;
- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;添加的名称。
@property (nonatomic, readonly, copy) id body;:携带的核心数据。

二、JS调用OC,实例如下

1.初始化wkwebview,并进行相应的配置
- (WKWebView *)webView {
    if (_webView == nil) {
        // js配置
        WKUserContentController *userContentController = [[WKUserContentController alloc] init];
        //需要JS调用iOS 原生的方法,都要添加到这里
        [userContentController addScriptMessageHandler:self name:@"jsCallOC"];
        // WKWebView的配置
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
        configuration.userContentController = userContentController;
        // 显示WKWebView
        _webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
        _webView.UIDelegate = self; // 设置WKUIDelegate代理
        [self.view addSubview:_webView];
    }
    return _webView;
}
2.在当前页面引入WKScriptMessageHandler,并实现WKScriptMessageHandler协议即可。
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    NSLog(@"方法名:%@", message.name);
    NSLog(@"参数:%@", message.body);
    // 方法名
    NSString *methods = [NSString stringWithFormat:@"%@:", message.name];
    SEL selector = NSSelectorFromString(methods);
    // 调用方法
    if ([self respondsToSelector:selector]) {
        [self performSelector:selector withObject:message.body];
    } else {
        NSLog(@"未实行方法:%@", methods);
    }
}
3.在JS方法里如何让JS通知Wkwebview
function onClickButton() {
    // 复杂数据
    var list = [1,2,3];
    var dict = {"name":"阳君", "qq":"937447974", "data":input.value, "list":list};
    alert(dict);
    // JS通知WKWebView
    window.webkit.messageHandlers.jsCallOC.postMessage(dict);
}
4.使用wkwebview加载html页面
- (void)viewDidLoad {
    [super viewDidLoad];
//    [self loadWebView]; // 加载测试
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
    NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:urlRequest]; // 加载页面
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 关于UIWebView的介绍,相信看过上文的小伙伴们,已经大概清楚了吧,如果有问题,欢迎提问。 本文是本系列...
    CoderLF阅读 9,096评论 2 12
  • 虽然WKWebView是在Apple的WWDC 2014随iOS 8和OS X 10.10出来的,是为了解决UIW...
    winann阅读 136,490评论 195 641
  • 前言 关于UIWebView的介绍,相信看过上文的小伙伴们,已经大概清楚了吧,如果有问题,欢迎提问。 本文是本系列...
    Dark_Angel阅读 29,152评论 67 291
  • 随着H5技术的兴起,在iOS开发过程中,难免会遇到原生应用需要和H5页面交互的问题。其中会涉及方法调用及参数传值等...
    Chris_js阅读 3,163评论 1 8
  • 来月经,还添上胃痛,难以言说的折磨。 煮好热水,吃四颗胃药,肚子和胃不断地隐隐作痛。 最受不了的不是这种病痛,而是...
    思索_BeautyLin阅读 422评论 3 3