淺談WKWebView使用、JS的交互
前言
WKWebView是iOS8 出來的瀏覽器控制項,用來取代UIWebView.對於WKWebView與UIWebView的對比特點,這裡就不過多的敘述,都算是老生常談的問題了,網上的說明也很多.近來在做Web端,需要植入移動端,並且做JS交互工作.以前寫過的JavaScript:淺談iOS與H5的交互-JavaScriptCore框架是用於UIWebView.在WKWebView並不適用了,自己做的過程中遇到一些坑,在這裡總結一下,做一下記錄.
WKWebView載入本地 html文件
現在的項目要求就是使用存儲在本地的html文件 js文件 css文件 img圖片等文件.我使用HBuilder創建了一個Demo工程.裡面包含了基本的文件以及圖片資源.如下所示.然後拖到Xcode工程中.
然後我們把整個Html工程文件夾導入工程中.
WKWebView 在iOS 9 有新的載入本地方法- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL API_AVAILABLE(macosx(10.11), ios(9.0));.但是我看了網上有一些博客說- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request;並不能載入本地html文件.其實兩者都能載入.只是需要把路徑寫對.第一個方法就不過多敘述了.網上有很多的博客.這裡我就用第二個方法來看一下如何載入.
NSString *path = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"index.html"];
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]];
[_mainWebView loadRequest: request];
- 1
- 2
- 3
運行效果圖如下.
Xcode工程中 html文件 載入js文件 css文件 img文件
上面我們載入了html.可是css樣式 .img文件和js文件都沒有載入出來.那麼我們該如何解決呢?(html原始載入圖如下所示.)
對於css文件、img文件 ,js文件我們只需要把html文件中的文件夾路徑刪除即可.如下所示.
???????? 注意:這裡是使用的- (WKNavigation *)loadRequest:(NSURLRequest *)request;方式載入的網頁.所有如上設置即可.如果使用的是loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL或者loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;都需要設置本地資源文件所對應的路徑! 我們只需要把資源文件所對應的路徑設置給readAccessURL 和 baseURL即可(). 例如下面所示.
//假定都在工程根目錄之下.
NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
[_mainWebView loadHTMLString:[self loadHtmlString] baseURL:baseURL];
- 1
- 2
- 3
對於js文件,有時候我們發現我們就算如上刪除了js文件夾的路徑依然不能使用.這是為什麼呢?.這裡就要去檢測查看工程的設置,是否把js文件當成一個可編譯文件使用了.我們需要把它移動到資源文件中.這樣就能正常載入了.如下圖所示.
WKWebView中警告窗 確認面板 輸入框的顯示
相比於UIWebView,WKWebView對警告窗 確認面板 輸入框並不能直接顯示.是通過WKUIDelegate代理方法收到對應的回調方法.如下所示.
//接收到警告面板
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;
//接收到確認面板
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;
//接收到輸入框
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler;
- 1
- 2
- 3
- 4
- 5
- 6
我們只需要對上面的回調方法進行實現即可實現顯示警告窗 確認面板 輸入框等需求.
WKWebView中OC方法調用JS方法
在WKWebView OC方法調用JS方法方法比較簡單.我們只需要使用如下方法即可.
- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;
- 1
看一下我寫的例子.在index.js中定義一個方法.方法內容為彈出一個警告框.代碼如下所示.
function alertAction(message) {
alert(message);
}
- 1
- 2
- 3
然後在ViewController控制器中定義一個Button.定義它的點擊方法.代碼如下所示.
- (UIButton *)alertButton{
if (_alertButton == nil) {
_alertButton = [[UIButton alloc] initWithFrame:CGRectMake(KMainWidth*0.2, KMainHeight - 60, KMainWidth * 0.6, 40)];
_alertButton.backgroundColor = [UIColor colorWithRed:250/255.0 green:204/255.0 blue:96/255.0 alpha:1.0];
_alertButton.layer.cornerRadius = 6.0f;
_alertButton.layer.masksToBounds = YES;
_alertButton.titleLabel.font = [UIFont systemFontOfSize:16];
[_alertButton setTitle:@"彈出彈窗" forState:UIControlStateNormal];
[_alertButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[_alertButton addTarget:self action:@selector(alertButtonAction) forControlEvents:UIControlEventTouchUpInside];
}
return _alertButton;
}
- (void)alertButtonAction{
[self.mainWebView evaluateJavaScript:@"alertAction("OC調用JS警告窗方法")" completionHandler:^(id _Nullable item, NSError * _Nullable error) {
NSLog(@"alert");
}];
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
因為彈窗不能直接顯示.所以我們實現了對應的代理方法.如下所示.
//接收到警告面板
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提示" message:message preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *action = [UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
completionHandler();//此處的completionHandler()就是調用JS方法時，`evaluateJavaScript`方法中的completionHandler
}];
[alert addAction:action];
[self presentViewController:alert animated:YES completion:nil];
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
這時候我們點擊按鈕就會調用對應的JS方法了.相比於JavaScriptCore框架還是非常簡單的.效果圖如下所示.
WKWebView中JS方法調用OC方法
上一個模塊我們看到了OC方法調用JS方法.那麼JS方法調用OC方法呢?我們也只需要幾步就可以完成調用.
第一步.我們需要在WKWebView創建的過程中初始化添加ScriptMessageHandler.(命名自定例如:currentCookies.如下所示)
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
WKUserContentController *userController = [[WKUserContentController alloc] init];
configuration.userContentController = userController;
_mainWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, KMainWidth, KMainHeight) configuration:configuration];
[userController addScriptMessageHandler:self name:@"currentCookies"];
- 1
- 2
- 3
- 4
- 5
然後實現代理方法.監聽JS的回調.為了查看效果,我們仍然使用彈窗的形式展示我們的回調信息.代碼如下所示.
//JS調用的OC回調方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
if ([message.name isEqualToString:@"currentCookies"]) {
NSString *cookiesStr = message.body;
NSLog(@"當前的cookie為： %@", cookiesStr);
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提示" message:@"JS調用的OC回調方法" preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *action = [UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleCancel handler:nil];
[alert addAction:action];
[self presentViewController:alert animated:YES completion:nil];
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
然後在Html文件中添加點擊方法.
<div id="button_div" onclick="buttonDivAction()">
點擊調用OC方法
</div>
- 1
- 2
- 3
緊接著.在js文件中實現點擊事件.這時候要注意的是ScriptMessageHandler的名稱要與上面定義的一致.
function buttonDivAction() {
window.webkit.messageHandlers.currentCookies.postMessage({
"body": "buttonActionMessage"
});
}
- 1
- 2
- 3
- 4
- 5
然後我們點擊網頁中對應的div就會出現對應的彈窗.效果圖如下所示.
並且控制台列印信息如下所示.
總結
相比於UIWebView,WKWebView確實更加的方便快捷.本篇博客就到這裡了.如果有任何問題,歡迎在評論區回復騷棟.感謝觀看,最後還是附上本篇博客的Demo傳送門.
TAG:程序員小新人學習 |