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 + ', 我也很高興見到你'
}

更詳細說明請點擊