美文网首页iOS 进阶
WKWebView给H5注入js点击事件

WKWebView给H5注入js点击事件

作者: DeCori | 来源:发表于2018-09-29 17:25 被阅读428次

    1.遵守<WKScriptMessageHandler>协议

    2.给网页button注入js

    - (void)createwk_WebView {
        if (!_wk_WebView) {
            WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];
            config.preferences = [[WKPreferences alloc]init];
            config.userContentController = [[WKUserContentController alloc]init];
            // 注入JS对象名称senderModel,当JS通过senderModel来调用时,我们可以在WKScriptMessageHandler代理中接收到
    //        [config.userContentController addScriptMessageHandler:self name:@"doShare"];
            btnId = @"index-bn";//测试-百度一下按钮id
            [config.userContentController addScriptMessageHandler:self name:@"backHomeClick_test"];
            //给 function backHomeClick(){}注入window.webkit.messageHandlers.(messagename).postMessage
            NSString *scriptStr = [NSString stringWithFormat:@"function backHomeClick_test(){window.webkit.messageHandlers.%@.postMessage(null);}(function(){var btn=document.getElementById(\"%@\");btn.addEventListener('click',backHomeClick_test,false);}());", @"backHomeClick_test",btnId];
            WKUserScript *userScript = [[WKUserScript alloc] initWithSource:scriptStr injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
            [config.userContentController addUserScript:userScript];
            _wk_WebView = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:config];
            _wk_WebView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
            _wk_WebView.navigationDelegate = self;
            _wk_WebView.UIDelegate = self;
            NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
            NSURLRequest *request = [NSURLRequest requestWithURL:url];
            [_wkWeb loadRequest:request];
            [self.view addSubview:self.wk_WebView];
        }
    }
    

    注意:
    (1)有的控件没有id属性,可以选择class属性获取getElementsByClassName。遍历getElementsByClassName返回的集合确定我们需要的控件。

    js代码:
    //通过id
    function backHomeClick_test() {
        window.webkit.messageHandlers.%@.postMessage(null);
    }
    (function(){
        var btn = document.getElementById("%@");
        btn.addEventListener('click',backHomeClick_test,false);
    }());
    
    //通过class
    function backHomeClick_test() {
        window.webkit.messageHandlers.%@.postMessage(null);
    }
    (function(){
    //getElementsByClassName() 方法返回文档中所有指定类名的元素集合,这里取第一个
        var btn = document.getElementsByClassName("%@")[0];
        btn.addEventListener('click',backHomeClick_test,false);
    }());
    
    OC注入js代码(通过id)
    btnId = @"index-bn";//百度一下按钮id
    NSString *scriptStr = [NSString stringWithFormat:@"function fun(){window.webkit.messageHandlers.%@.postMessage(null);}(function(){var btn=document.getElementById(\"%@\");btn.addEventListener('click',fun,false);}());", @"backHomeClick_test", btnId];
    WKUserScript *userScript = [[WKUserScript alloc] initWithSource:scriptStr injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
    [_userContentController addUserScript:userScript];
    

    (2)有些网页pc端和手机端的域名不一样。所以找网页控件的id或class的时候,同一个网站pc网页和手机网页源码中id或class属性不一致的情况。

    3.在delegate中调用OC方法

    #pragma mark - WKScriptMessageHandler
    - (void)userContentController:(WKUserContentController *)userContentController
          didReceiveScriptMessage:(WKScriptMessage *)message {
        if ([message.name isEqualToString:@"backHomeClick_test"]) {
            NSLog(@"%@", message.body);
    //做你想做的事
            [self.navigationController popViewControllerAnimated:YES];
            return;
        }
    }
    

    参考WKWebView与JS交互

    相关文章

      网友评论

        本文标题:WKWebView给H5注入js点击事件

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