美文网首页WKwebView
WKWebView---JS调用OC方法

WKWebView---JS调用OC方法

作者: 丨十三叔丨 | 来源:发表于2018-01-30 16:52 被阅读0次

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

    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]; // 加载页面
    }
    

    相关文章

      网友评论

        本文标题:WKWebView---JS调用OC方法

        本文链接:https://www.haomeiwen.com/subject/qimczxtx.html