iOS WKWebView與JS交互

1.1 WKScriptMessageHandler協議

WKScriptMessageHandler其實就是一個遵循的協議,它能讓網頁通過JS把消息發送給OC。其中協議方法。

/*! @abstract Invoked when a script message is received from a webpage.
 @param userContentController The user content controller invoking the
 delegate method.
 @param message The script message received.
 */
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

從協議中我們可以看出這里使用了兩個類WKUserContentController和WKScriptMessage。WKUserContentController可以理解為調度器,WKScriptMessage則是攜帶的數據。

1.2 WKUserContentController

WKUserContentController有兩個核心方法,也是它的核心功能。

- (void)addUserScript:(WKUserScript *)userScript;: js注入,即向網頁中注入我們的js方法,這是一個非常強大的功能,開發中要慎用。
- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;:添加供js調用oc的橋梁。這里的name對應WKScriptMessage中的name,多數情況下我們認為它就是方法名。

1.3 WKScriptMessage

WKScriptMessage就是js通知oc的數據。其中有兩個核心屬性用的很多。

@property (nonatomic, readonly, copy) NSString *name; :對應- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;添加的name。
@property (nonatomic, readonly, copy) id body;:攜帶的核心數據。

js調用時只需

window.webkit.messageHandlers.<name>.postMessage(<messageBody>)

這里的name就是我們添加的name。

一、JS調OC代碼

JS代碼:

<!DOCTYPE html>
<html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
<body style="background-color: white;">
    <script type="text/javascript">
        function jsCallNative() {
           window.webkit.messageHandlers.callNativeAndSend.postMessage('callcallcall');
           alert(callNative);
        }
    </script>
    
    <button type="button" onclick = "jsCallNative()" style="width:100%; height:30px;"/>調用OC代碼</button>
</body>
</html>

注意:window.webkit.messageHandlers.callNativeAndSend.postMessage('callcallcall');這行代碼才是調用oc的方法,方法名:callNativeAndSend 參數就是:callcallcall

OC代碼:

 WKUserContentController *userContentController = [[WKUserContentController alloc] init];
        [userContentController addScriptMessageHandler:self name:@"callNativeAndSend"];
        [userContentController addScriptMessageHandler:self name:@"NativeObject.shareString"];
        // WKWebView的配置
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
        configuration.userContentController   = userContentController;
        //創建WKWebView
        
        _webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight) configuration:configuration];

上面代碼,是創建webView,并且告訴JS有哪些方法。

Adding a script message handler with name name causes the JavaScript function window.webkit.messageHandlers.name.postMessage(messageBody) to be defined in all frames in all web views that use the user content controller.
譯:添加名稱名稱的腳本消息處理程序會導致在所有使用用戶內容控制器的Web視圖的所有框架中定義JavaScript函數window.webkit.messageHandlers.name.postMessage(messageBody)。

- (void)addScriptMessageHandler:(id<WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;

但是 [userContentController addScriptMessageHandler:self name:@"NativeObject.shareString"];親測是無效的,其只能像[userContentController addScriptMessageHandler:self name:@"callNativeAndSend"];添加這種。

當JS調用OC方法后,會執行以下回調,name是方法名,可以用其作區分判斷,body是參數

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    NSLog(@"\n body:%@ \n name:%@",message.body,message.name);
}

另外還有一種注入JS的方式:

- (void)addUserScript:(WKUserScript *)userScript;: js注入,即向網頁中注入我們的js方法,這是一個非常強大的功能,開發中要慎用。

注意:在UIWebview中,當我們第一次給h5注入js方法后,在后續的頁面操作過程中可能會丟失這個方法,也就是js不再能拿到這個方法。可能原因是:在h5頁面操作過程中,創建了兩個window,而我們加的js方法仍在第一個window上,在新的window上就拿不到了。在WKWebview中,丟失方法是因為js調用方法調早了,而我們還沒有注入;js延遲調用問題不存在了。 在WKWebview中用上述方式注入代碼后會避免此問題出現!!!*

二、OC調JS代碼

[webView evaluateJavaScript:@"globalObject.nativeCallJS('abc')" completionHandler:^(id _Nullable data, NSError * _Nullable error) {
        if (error) {
            NSLog(@"error:%@",error);
        }
    }];

abc是傳遞給JS的參數,globalObject是JS中全局屬性,nativeCallJS是其下的方法。

三、優化

[userContentController addScriptMessageHandler:self name:@"callNativeAndSend"]
當我們添加注入方法時,以上代碼會強引用self,即當前控制器,會導致再dealloc的時候self不會釋放,解決辦法是創建一個新類,并實現WKScriptMessageHandler代理方法。代碼如下:

WeakScriptMessageDelegate.h
#import <Foundation/Foundation.h>
#import <WebKit/WebKit.h>

@interface WeakScriptMessageDelegate : NSObject<WKScriptMessageHandler>

@property (nonatomic, weak) id<WKScriptMessageHandler> scriptDelegate;

- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate;

@end
WeakScriptMessageDelegate.m

#import "WeakScriptMessageDelegate.h"

@implementation WeakScriptMessageDelegate

- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate
{
    self = [super init];
    if (self) {
        _scriptDelegate = scriptDelegate;
    }
    return self;
}

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
    [self.scriptDelegate userContentController:userContentController didReceiveScriptMessage:message];
}

@end

盡管如此,在self里還是要在dealloc的時候移除方法:

[[_wkWebView configuration].userContentController removeScriptMessageHandlerForName:@"jsCallNative"];

執行上述代碼之后,self和WeakScriptMessageDelegate都能安全釋放。

推薦一個強大的蘋果官方庫,JavaScriptCore 以及 iOS JavaScriptCore使用

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容