言

WKWebView是iOS8 出來的瀏覽器控件,用來取代UIWebView.對于WKWebView與UIWebView的對比特點,這里就不過多的敘述,都算是老生常談的問題了,網(wǎng)上的說明也很多.近來在做Web端,需要植入移動端,并且做JS交互工作.以前寫過的JavaScript:淺談iOS與H5的交互-JavaScriptCore框架是用于UIWebView.在WKWebView并不適用了,自己做的過程中遇到一些坑,在這里總結一下,做一下記錄.

WKWebView加載本地 html文件

現(xiàn)在的項目要求就是使用存儲在本地的html文件 js文件 css文件 img圖片等文件.我使用HBuilder創(chuàng)建了一個Demo工程.里面包含了基本的文件以及圖片資源.如下所示.然后拖到Xcode工程中.

然后我們把整個Html工程文件夾導入工程中.

WKWebView 在iOS 9 有新的加載本地方法- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL API_AVAILABLE(macosx(10.11), ios(9.0));.但是我看了網(wǎng)上有一些博客說- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request;并不能加載本地html文件.其實兩者都能加載.只是需要把路徑寫對.第一個方法就不過多敘述了.網(wǎng)上有很多的博客.這里我就用第二個方法來看一下如何加載.

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;方式加載的網(wǎng)頁.所有如上設置即可.如果使用的是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文件,有時候我們發(fā)現(xiàn)我們就算如上刪除了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

我們只需要對上面的回調方法進行實現(xiàn)即可實現(xiàn)顯示警告窗 確認面板 輸入框等需求.

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

因為彈窗不能直接顯示.所以我們實現(xiàn)了對應的代理方法.如下所示.

//接收到警告面板

- (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創(chuàng)建的過程中初始化添加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

然后實現(xiàn)代理方法.監(jiān)聽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文件中實現(xiàn)點擊事件.這時候要注意的是ScriptMessageHandler的名稱要與上面定義的一致.

function buttonDivAction() {

window.webkit.messageHandlers.currentCookies.postMessage({

"body": "buttonActionMessage"

});

}

• 1
• 2
• 3
• 4
• 5

然后我們點擊網(wǎng)頁中對應的div就會出現(xiàn)對應的彈窗.效果圖如下所示.

并且控制臺打印信息如下所示.

總結

相比于UIWebView,WKWebView確實更加的方便快捷.本篇博客就到這里了.如果有任何問題,歡迎在評論區(qū)回復騷棟.感謝觀看,最后還是附上本篇博客的Demo傳送門.

1、Android中利用webView調用網(wǎng)頁上的Js代碼。

Android 中可以通過webView來實現(xiàn)和Js的交互，在程序中調用Js代碼，只需要將webView控件的支持Js的屬性設置為true，然后通過loadUrl就可以直接進行調用，如下所示：

mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.loadUrl("javascript：test()");

2、網(wǎng)頁上調用Android中Java代碼的方法

在網(wǎng)頁中調用Java代碼，需要在webView控件中添加javascriptInterface。如下所示：

mWebView.addJavascriptInterface(new Object() {
 public void clickOnAndroid() {
 mHandler.post(new Runnable() {
 public void run() {
 Toast.makeText(Test.this, "測試調用java", Toast.LENGTH_LONG).show();
 }
 });
 }
}, "demo");

在網(wǎng)頁中，只需要像調用Js方法一樣，進行調用就可以

<div id='b'><a onclick="window.demo.clickOnAndroid()">b.c</a></div>

3、Java代碼調用Js并傳參

首先需要帶參數(shù)的Js函數(shù)，如function test(str)，然后只需在調用Js時傳入?yún)?shù)即可，如下所示：

mWebView.loadUrl("javascript：test('aa')");

4、Js中調用Java函數(shù)并傳參

首先一樣需要帶參數(shù)的函數(shù)形式，但需注意此處的參數(shù)需要final類型，即得到以后不可修改，如果需要修改其中的值，可以先設置中間變量，然后進行修改。如下所示：

mWebView.addJavascriptInterface(new Object() {
 public void clickOnAndroid(final int i) {
 mHandler.post(new Runnable() {
 public void run() {
 int j=i;
 j++;
 Toast.makeText(Test.this, "測試調用java" + String.valueOf(j), Toast.LENGTH_LONG).show();
 }
 });
 }
}, "demo");

然后在html頁面中，利用如下代碼：

<div id='b'><a onclick="window.demo.clickOnAndroid(2)">b.c</a></div>，

即可實現(xiàn)調用