iOS 開發 Object-C和JavaScript互動詳解之OC與JS互動在WKWebView中使用
阿新 • • 發佈：2019-01-04
1.OC與JS互動在UIWebView中使用
2. WKWebView的使用詳解
3.OC與JS互動在WKWebView中使用
//
// ViewController.m
// oc與js互動WKWebView
//
// Created by zhouyu on 15/6/17.
// Copyright © 2015年 zhouyu. All rights reserved.
//
#import "ViewController.h"
#import <WebKit/WebKit.h>
#import "TestViewController.h"
@interface ViewController 4.使用拓展
配置Js與Web內容互動
WKUserContentController是用於給JS注入物件的，注入物件後，JS端就可以使用：
window.webkit.messageHandlers.<name>.postMessage(<messageBody>)來呼叫傳送資料給iOS端，比如：
window.webkit.messageHandlers.AppModel.postMessage({body: '傳資料'});AppModel就是我們要注入的名稱，注入以後，就可以在JS端呼叫了，傳資料統一通過body傳，可以是多種型別，只支援NSNumber, NSString, NSDate, NSArray,NSDictionary, and NSNull型別。
下面我們配置給JS的main frame注入AppModel名稱，對於JS端可就是物件了：
// 通過JS與webview內容互動
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.userContentController = [[WKUserContentController alloc] init];
// 注入JS物件名稱AppModel，當JS通過AppModel來呼叫時，
// 我們可以在WKScriptMessageHandler代理中接收到
[config.userContentController addScriptMessageHandler:self name:@"AppModel"];當JS通過AppModel傳送資料到iOS端時，會在代理中收到：
#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController
didReceiveScriptMessage:(WKScriptMessage *)message {
if ([message.name isEqualToString:@"AppModel"]) {
// 列印所傳過來的引數，只支援NSNumber, NSString, NSDate, NSArray,
// NSDictionary, and NSNull型別
NSLog(@"%@", message.body);
}
}5.配置代理
如果需要處理web導航條上的代理處理，比如連結是否可以跳轉或者如何跳轉，需要設定代理；而如果需要與在JS呼叫alert、confirm、prompt函式時，通過JS原生來處理，而不是呼叫JS的alert、confirm、prompt函式，那麼需要設定UIDelegate，在得到響應後可以將結果反饋到JS端：
// 導航代理
self.webView.navigationDelegate = self;
// 與webview UI互動代理
self.webView.UIDelegate = self;新增對WKWebView屬性的監聽
WKWebView有好多個支援KVO的屬性，這裡只是監聽loading、title、estimatedProgress屬性，分別用於判斷是否正在載入、獲取頁面標題、當前頁面載入進度：
// 新增KVO監聽
[self.webView addObserver:self
forKeyPath:@"loading"
options:NSKeyValueObservingOptionNew
context:nil];
[self.webView addObserver:self
forKeyPath:@"title"
options:NSKeyValueObservingOptionNew
context:nil];
[self.webView addObserver:self
forKeyPath:@"estimatedProgress"
options:NSKeyValueObservingOptionNew
context:nil];然後我們就可以實現KVO處理方法，在loading完成時，可以注入一些JS到web中。這裡只是簡單地執行一段web中的JS函式：
#pragma mark - KVO
- (void)observeValueForKeyPath:(NSString *)keyPath
ofObject:(id)object
change:(NSDictionary<NSString *,id> *)change
context:(void *)context {
if ([keyPath isEqualToString:@"loading"]) {
NSLog(@"loading");
} else if ([keyPath isEqualToString:@"title"]) {
self.title = self.webView.title;
} else if ([keyPath isEqualToString:@"estimatedProgress"]) {
NSLog(@"progress: %f", self.webView.estimatedProgress);
self.progressView.progress = self.webView.estimatedProgress;
}
// 載入完成
if (!self.webView.loading) {
// 手動呼叫JS程式碼
// 每次頁面完成都彈出來，大家可以在測試時再開啟
NSString *js = @"callJsAlert()";
[self.webView evaluateJavaScript:js completionHandler:^(id _Nullable response, NSError * _Nullable error) {
NSLog(@"response: %@ error: %@", response, error);
NSLog(@"call js alert by native");
}];
[UIView animateWithDuration:0.5 animations:^{
self.progressView.alpha = 0;
}];
}
}6.WKUIDelegate
與JS原生的alert、confirm、prompt互動，將彈出來的實際上是我們原生的視窗，而不是JS的。在得到資料後，由原生傳回到JS：
#pragma mark - WKUIDelegate
- (void)webViewDidClose:(WKWebView *)webView {
NSLog(@"%s", __FUNCTION__);
}
// 在JS端呼叫alert函式時，會觸發此代理方法。
// JS端呼叫alert時所傳的資料可以通過message拿到
// 在原生得到結果後，需要回調JS，是通過completionHandler回撥
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
NSLog(@"%s", __FUNCTION__);
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"alert" message:@"JS呼叫alert" preferredStyle:UIAlertControllerStyleAlert];
[alert addAction:[UIAlertAction actionWithTitle:@"確定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler();
}]];
[self presentViewController:alert animated:YES completion:NULL];
NSLog(@"%@", message);
}
// JS端呼叫confirm函式時，會觸發此方法
// 通過message可以拿到JS端所傳的資料
// 在iOS端顯示原生alert得到YES/NO後
// 通過completionHandler回撥給JS端
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler {
NSLog(@"%s", __FUNCTION__);
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"confirm" message:@"JS呼叫confirm" preferredStyle:UIAlertControllerStyleAlert];
[alert addAction:[UIAlertAction actionWithTitle:@"確定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler(YES);
}]];
[alert addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
completionHandler(NO);
}]];
[self presentViewController:alert animated:YES completion:NULL];
NSLog(@"%@", message);
}
// JS端呼叫prompt函式時，會觸發此方法
// 要求輸入一段文字
// 在原生輸入得到文字內容後，通過completionHandler回撥給JS
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler {
NSLog(@"%s", __FUNCTION__);
NSLog(@"%@", prompt);
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"textinput" message:@"JS呼叫輸入框" preferredStyle:UIAlertControllerStyleAlert];
[alert addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
textField.textColor = [UIColor redColor];
}];
[alert addAction:[UIAlertAction actionWithTitle:@"確定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler([[alert.textFields lastObject] text]);
}]];
[self presentViewController:alert animated:YES completion:NULL];
}