WKWebView 基本使用及与JS交互

参考资料

OC与JS交互之WKWebView 参考

导入文件

---

#import <WebKit/WebKit.h>

协议

---

<
UIScrollViewDelegate,
WKUIDelegate,
WKNavigationDelegate,
WKScriptMessageHandler
>

单例

---

/** WKWebView 单例*/
- (WKWebView*)WebView{
    if (!_WebView) {
        //js配置
        WKWebViewConfiguration *config = [WKWebViewConfiguration new];
        WKUserContentController* userContentController = [WKUserContentController new];
        [userContentController addScriptMessageHandler:self name:@"showName"];
        config.userContentController = userContentController;
        //单例
        WKWebView* webview = [[WKWebView alloc]initWithFrame:PKScreenFrame configuration:config];
        webview.backgroundColor = PKChatBackgroundColor;
        webview.size = CGSizeMake(PKScreenW, PKScreenH - PKNavigationH);
        webview.navigationDelegate = self;
        webview.UIDelegate = self;
        webview.scrollView.delegate = self;
        _WebView = webview;
    }
    return _WebView;
}

webview代理

---

// 页面真正开始加载
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation{
}

// 页面将要加载
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation{        
}

// 页面加载完成
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation{
}

// 页面加载失败
- (void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error{
}

// 初始化点击配置
-(WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures{
    if (!navigationAction.targetFrame.isMainFrame) {
        [webView loadRequest:navigationAction.request];
    }
    return nil;
}

js调用native

---

native代理

//js回调
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
	if ([message.name isEqualToString:@"showName"]) {
        NSString *info = [NSString stringWithFormat:@"你好 %@, 很高兴见到你",message.body];
        [self showMsg:info];
    }    
}

js方法

//其中  showName字段为native 的消息名(可变)
function btnClick2() {
    window.webkit.messageHandlers.showName.postMessage('xiao黄')
}

native调用js

---

native方法

- (void)btnClick:(UIButton *)sender {
    if (!self.WebView.loading) {
        [self.WebView evaluateJavaScript:@"alertName('小红')" completionHandler:nil];
    }
}

js方法

function alertName(msg) {
    //alert('你好 ' + msg + ', 我也很高兴见到你')
    document.getElementById('name').innerHTML = '你好 ' + msg + ', 我也很高兴见到你'
}

更详细说明请点击