WKWebView OC與JS交互 同步返回值
<font size=5 color='#333333'>以下主要講WKWebView中OC與JS交互,UIWebView這里稍微簡單介紹</font>
<font size=3>這里重點關于wkwebview中JS調用OC<font color='#20B2AA'>返回值的問題</font>，普通的OC與JS交互網上資料一大堆</font>
一、OC與JS交互
<font size=4 color='#666666'>稍微簡單介紹下:</font>
1.1.JavaScript —> Objective-C
1.1.1.第一種JS調用OC window.webkit.messageHandlers.<方法名>.postMessage(<數據>)
- 向WKWebViewConfiguration實例中注入OC對象
// 這里只注冊一個方法足矣，通過參數functionName區分調用OC相應方法
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
...
[config.userContentController addScriptMessageHandler:self name:@"Call" ];
- JS方法
// 這里使用window.webkit.messageHandlers.<方法名>.postMessage(<數據>) 沒有直接返回值功能
var JS_Fun_01 = function (){
var args = arguments;
var args_num = arguments.length;
window.webkit.messageHandlers.Call.postMessage({
'functionName':'OC_Fun_01',
'arguments': args_num == 0 ? {} : JSON.stringify(args),
});
};
var JS_Fun_02 = function (){
var args = arguments;
var args_num = arguments.length;
window.webkit.messageHandlers.Call.postMessage({
'functionName':'OC_Fun_02',
'arguments': args_num == 0 ? {} : JSON.stringify(args),
});
};
var JS_Fun_03 = function (){
var args = arguments;
return JSON.stringify(args);
};
<font size=3 color='#666666'>下面是<font color=red>錯誤</font>調用：</font>
// 假如有個需求通過調用OC方法給個返回值
// 下面這個方法是錯誤的 window.webkit.messageHandlers.Call.postMessage沒有返回值功能
var JS_Fun_Error = function (){
var result = window.webkit.messageHandlers.Call.postMessage({
'functionName':'OC_Fun_01',
'arguments':{},
});
return result;
};
- OC方法
// JS -> OC
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
if ([message.name isEqualToString:@"Call"])
{
NSString *functionName = [message.body valueForKey:@"functionName"];
NSDictionary *arguments = [message.body valueForKey:@"arguments"];
if ([functionName isEqualToString:@"OC_Fun_01"])
{
[self OC_Fun_01:arguments];
}
else if ([functionName isEqualToString:@"OC_Fun_02"])
{
[self OC_Fun_02:arguments];
}
}
}
- (void)OC_Fun_01:(id)arguments
{
}
- (void)OC_Fun_02:(id)arguments
{
}
...
1.1.2.第二種JS調用OC URL請求截獲
<font size=3 color='#999999'>JavaScript 在瀏覽器環境中發出URL請求, Objective-C 截獲請求以獲取相關請求的思路. 在Objective-C 中在實現UIWebViewDelegate 時截獲請求:</font>
// UIWebView
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSURL *URL = request.URL;
// if (url是自定義的JavaScript通信協議) {
//
// do something
//
// 返回 NO 以阻止 `URL` 的加載或者跳轉
// return NO;
// }
}
// WKWebView
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
NSURL *URL = navigationAction.request.URL;
// if (url是自定義的JavaScript通信協議) {
//
// do something
//
// decisionHandler(WKNavigationActionPolicyCancel); 以阻止 `URL` 的加載或者跳轉
// decisionHandler(WKNavigationActionPolicyCancel);
// return;
// }
decisionHandler(WKNavigationActionPolicyAllow);
}
JavaScript有各種不同的方式發出URL 請求:
第一種：location.href : 修改window.location.href 替換成一個合成的URL, 比如 async://method:args
第二種：location.hash : 修改 window.location.hash
第三種：iframe
1.1.3.第三種JS調用OC 監聽Cookie
// Objective-C 可以通過NSHTTPCookieManagerCookiesChangedNotification 事件以監聽cookie的變化.
// 當JavaScript 修改 document.cookie 后, Objective-C 可以通過分析cookie以得到信息.
NSNotificationCenter *center = NSNotificationCenter.defaultCenter;
[defaultCenter addObserverForName:NSHTTPCookieManagerCookiesChangedNotification
object:nil
queue:nil
usingBlock:^(NSNotification *notification) {
NSHTTPCookieStorage *cookieStorage = notification.object;
// do something with cookieStorage
}];
1.1.4.第四種JS調用OC <JavaScriptCore/JavaScriptCore>,<font size=4 color=red>可同步返回值</font>
// 此處無返回值寫法
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"JS_Fun_04"] = ^() {
//用數組接收傳過來的多個參數
NSArray *paramArray = [JSContext currentArguments];
};
// 此處有回值寫法
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
__weak JSContext *theContext = context;
context[@"JS_Fun_04"] = ^JSValue *() {
//用數組接收傳過來的多個參數
NSArray *paramArray = [JSContext currentArguments];
return [JSValue valueWithObject:@"這里是返回值" inContext:theContext];
};
<font size=3>以上前三種方式<font size=5 color=red>缺點</font></font>
window.webkit.messageHandlers.<方法名>.postMessage(<數據>)、URL請求截獲、監聽Cookie的三種方式,整個過程是異步，不能同步
在JavaScript中不能直接獲取Objective-C處理的返回值,需要Objective-C 調用JavaScript層自己實現的api才能得到返回值
使用callback 比較麻煩,需要在JavaScript 上自己實現
1.2.Objective-C —> JavaScript
// WKWebView
[wkWebView evaluateJavaScript:@"JS_Fun_03('參數一','參數二')" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"%@", result);
}];
// UIWebView的第一種
NSString *result = [webView stringByEvaluatingJavaScriptFromString:@"JS_Fun_03('參數一','參數二')"];
// UIWebView的第二種
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
id result = [context evaluateScript:@"JS_Fun_03('參數一','參數二')"];
JavaScriptCore 各種類型數據:
Objective-C type | JavaScript type
--------------------+---------------------
nil | undefined
NSNull | null
NSString | string
NSNumber | number, boolean
NSDictionary | Object object
NSArray | Array object
NSDate | Date object
NSBlock (1) | Function object (1)
id (2) | Wrapper object (2)
Class (3) | Constructor object (3)
二、WKWebView實現JS調用OC 同步返回值 <font color=red>重點?? 重點???? 重點?????? </font>
js:
var JS_Fun_05 = function (){
var args = arguments;
var type = "JSbridge";
var functionName = "OC_Fun_05";
var payload = {"type": type, "functionName": functionName, "arguments": args};
var res = prompt(JSON.stringify(payload));
};
oc:
self.webView.UIDelegate = self;
// JS端調用prompt函數時，會觸發此代理方法。
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler {
NSError *err = nil;
NSData *dataFromString = [prompt dataUsingEncoding:NSUTF8StringEncoding];
NSDictionary *payload = [NSJSONSerialization JSONObjectWithData:dataFromString options:NSJSONReadingMutableContainers error:&err];
if (!err)
{
NSString *type = [payload objectForKey:@"type"];
if (type && [type isEqualToString:@"JSbridge"])
{
NSString *returnValue = @"";
NSString *functionName = [payload objectForKey:@"functionName"];
NSDictionary *args = [payload objectForKey:@"arguments"];
if ([functionName isEqualToString:@"OC_Fun_05"])
{
returnValue = [self OC_Fun_05:args];
}
else if ([functionName isEqualToString:@"OC_Fun_06"])
{
returnValue = [self OC_Fun_06:args];
}
completionHandler(returnValue);
}
}
}
- (NSString *)OC_Fun_05:(NSDictionary *)args
{
return @"Fun:OC_Fun_05";
}
- (NSString *)OC_Fun_06:(NSDictionary *)args
{
return @"Fun:OC_Fun_06";
}
