iOS 进阶

WKWebView给H5注入js点击事件

2018-09-29  本文已影响428人  DeCori

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交互

上一篇下一篇

猜你喜欢

热点阅读