iOS 的webView分為兩類, 一類是 UIKit框架下的 UIWebView , 另一類是 WebKit框架下的 WKWebView. UIWebView 與JS 的交互是依賴于JavaScriptCore(iOS7.0),而WKWebView則是iOS8.0發(fā)布的.so 如果項目不需要兼容iOS8.0以下的版本則使用WKWebView即可.本文將介紹UIWebView WKWebView 與JS的交互.
一.UIWebView
對于UIWebView大家都不陌生,網(wǎng)頁或富文本加載都能用到,這里對于UIWebView基本的用法就不進行介紹了.UIWebView與JS的交互方面主要是依賴于JavaScriptCore類庫,下面簡單的介紹下這個類庫.
<JavaScriptCore/JavaScriptCore.h> Command+左鍵 進入
JavaScriptCore的類和協(xié)議.png
- JSContext ??????為JavaScript提供運行環(huán)境
- JSValue ??????? 是JavaScript和Object-C之間互換的橋梁
- JSManagedValue ?? 為開發(fā)人員提供對象內(nèi)存管理
- JSVirtualMachine ?? 為JavaScript的運行提供了底層資源
- JSExport ?????? 作為JavaScript和Objective-C兩種語言的互通協(xié)議篮赢。
在UIWebView中,native與JS的交互其實就是通過攔截request的方式實現(xiàn)的. 主要有兩種方法, 協(xié)議 和 Blcok.
協(xié)議(JSExport)
JSExport中沒有約定任何的方法址晕，連可選的(@optional)都沒有叛赚，但是所有繼承了該協(xié)議(@protocol)的協(xié)議（注意不是Objective-C的類(@interface)）中定義的方法，都可以在JSContext中被使用。JSExport協(xié)議詳細講解
Native中的代碼
/**
* 制定協(xié)議(遵循 JSExport協(xié)議)
*/
@protocol JSObjcProtocol <JSExport>
/**
* 商品詳情頁面返回按鈕
*/
- (void)goBack;
/**
* 購物車界面編輯按鈕
*/
- (void)edit;
/**
* 支付訂單界面確認支付按鈕 以及三種傳值方式
*/
//javascript:App.pay(payInfo);
- (void)pay:(NSString *)payInfo;
//App.payInfoUserIDWithUserName("用戶ID","用戶名字");
- (void)payInfoUserID:(NSString *)userid withUserName:(NSString *)userName;
//App.payInfoOrder("訂單號","支付方式");
JSExportAs(payInfoOrder, - (void)payInfoOrder:(NSString *)order withPayType:(NSString *)type);
@nd
//控制器遵守協(xié)議之后, 協(xié)議中的方法都需要實現(xiàn).
@interface UIWebViewController ()<UIWebViewDelegate,JSObjcProtocol>
@property (strong, nonatomic) IBOutlet UIWebView *webView;
//為JavaScript提供運行環(huán)境
@property (strong ,nonatomic) JSContext *jsContext;
@end
- (void)webViewDidFinishLoad:(UIWebView *)webView{
//獲取當(dāng)前加載完成網(wǎng)頁的上下文環(huán)境
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//將設(shè)置的標(biāo)識符注入 由控制器接收
self.jsContext[@"App"] = self;
//異常處理
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"異常信息：%@", exceptionValue);
};
}
這里解釋下 self.jsContext[@"App"] = self;
對應(yīng)JS中的代碼
<body class="by">
<div class="ftop">
<a class="back" onClick="javascript:history.back(-1);">返回</a>
<h2>購物車</h2>
<a class="showde">編輯</a>
</div>
<script>
$(function(){
$(".showde").click(function(){
App.edit();
})
})
</script>
</body>
這是UIWebView與JS交互的關(guān)鍵所在, JavaScriptCore框架會通過class_copyProtocolList方法找到類所遵循的協(xié)議碌上，然后再對每個協(xié)議通過protocol_copyProtocolList檢查它是否遵循JSExport協(xié)議進而將方法反映到JavaScript之中掀鹅。直白的說就是 調(diào)用本地方法之后從協(xié)議中取出相對應(yīng)的方法在JavaScript中調(diào)用.
關(guān)于異常處理:在JSContext中執(zhí)行的JavaScript如果出現(xiàn)異常，只會被JSContext捕獲并存儲在exception屬性上次屠，而不會向外拋出园匹。時時刻刻檢查JSContext對象的exception是否不為nil顯然是不合適，更合理的方式是給JSContext對象設(shè)置exceptionHandler劫灶，它接受的是^(JSContext *context, JSValue *exceptionValue)形式的Block裸违。其默認值就是將傳入的exceptionValue賦給傳入的context的exception屬性.
iOS7新JavaScriptCore框架入門介紹
Block
可以從一定程度上解決JSContext引用環(huán)境變量與控制器self的循環(huán)引用問題
Native中的代碼
- (void)webViewDidFinishLoad:(UIWebView *)webView{
//獲取網(wǎng)頁上下文環(huán)境
self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
__weak typeof(self) weakSelf = self;
//Block可以傳入JSContext中當(dāng)做JavaScript的方法使用
self.context[@"goBack"] = ^() {
NSLog(@"點擊返回按鈕");
dispatch_async(dispatch_get_main_queue(), ^{
[weakSelf.navigationController popViewControllerAnimated:YES];
});
};
self.context[@"goShopping"] = ^() {
NSLog(@"點擊購物車按鈕");
//獲取參數(shù)列表
NSArray *args = [JSContext currentArguments];
for (JSValue *jsVal in args) {
NSLog(@"%@", jsVal);
}
//獲取當(dāng)前調(diào)用該方法的對象
JSValue *this = [JSContext currentThis];
NSLog(@"this: %@",this);
[weakSelf goTo];
};
}
- (void)goTo{
//將參數(shù)傳進去來調(diào)用JS的方法
[self.context evaluateScript:@"go('商品3')"];
}
JS中的代碼
<body>
<div class="ftop">
<a class="back" onclick="goBack()">返回</a>
<h2>商品詳情</h2>
<a class="comea" onclick="goShopping(['商品1','商品2'])">購物車</a>
</div>
<script>
function go(info){
alert(info);
}
</script>
</body>
二.WKWebView
適配iOS8.0,相較于UIWebView,性能功能方面都有了很大的提升,如果項目不需要適配iOS7的話可以直接使用WKWebView.
簡單介紹一下代理協(xié)議:
- WKNavigationDelegate: UIWebViewDelegate的功能都有,而且添加了頁面導(dǎo)航和網(wǎng)頁加載進度的監(jiān)聽
- WKUIDelegate: 監(jiān)聽JS方法中的alert、confirm本昏、prompt
- WKScriptMessageHandler: JS交互相關(guān)
@interface WKWebViewController ()<WKNavigationDelegate,WKUIDelegate,WKScriptMessageHandler>
@property (strong ,nonatomic) WKWebView *webView;
@end
- (void)viewDidLoad {
[super viewDidLoad];
//初始化
//_webView = [[WKWebView alloc]initWithFrame:self.view.bounds];
//帶有設(shè)置選項的初始化
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc]init];
_webView = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:configuration];
//設(shè)置代理
_webView.navigationDelegate = self;
_webView.UIDelegate = self;
//加載本地的HTML
NSURL *url = [[NSBundle mainBundle] URLForResource:@"shopsDetail_WKWebView" withExtension:@"html"];
[_webView loadRequest:[NSURLRequest requestWithURL:url]];
[self.view addSubview:_webView];
//添加一個名稱,可以在JS中通過這個名稱發(fā)送消息
[[_webView configuration].userContentController addScriptMessageHandler:self name:@"goBackApp"];
[[_webView configuration].userContentController addScriptMessageHandler:self name:@"goShoppingApp"];
}
/**
* WKScriptMessageHandler協(xié)議中必須要實現(xiàn)的方法
用來接收JS端通過window.webkit.messageHandlers.{Name}.postMessage()方法發(fā)送的消息并做相應(yīng)處理
*/
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
NSLog(@"方法名 %@供汛，傳回參數(shù) %@",message.name,message.body);
//根據(jù)方法名來區(qū)分
if ([message.name isEqual:@"goBackApp"]) {
[self.navigationController popViewControllerAnimated:YES];
}else if ([message.name isEqual:@"goShoppingApp"]){
//調(diào)用JS中的方法并將參數(shù)傳遞到JS中
[self.webView evaluateJavaScript:@"altertFromOC('商品1,商品2')" completionHandler:nil];
}
}
JS中代碼
<body>
<div class="ftop">
<a class="back" onclick="goBack()">返回</a>
<h2>商品詳情</h2>
<a onclick = "goShopping()">購物車</a>
</div>
<script>
//接收Native發(fā)來的消息
function altertFromOC(shops){
alert(shops);
}
function goBack() {
將goBackApp發(fā)送Native
window.webkit.messageHandlers.goBackApp.postMessage(null);
}
function goShopping(){
將goBackApp發(fā)送Native中,并攜帶參數(shù){shopsName:'商品名',shopsID:'商品ID'}
window.webkit.messageHandlers.goShoppingApp.postMessage({shopsName:'商品名',shopsID:'商品ID'})
}
</script>
</body>
在WKWebView中,網(wǎng)頁自身的alert、confirm涌穆、prompt等方法是被攔截的,不論是否有WKUIDelegate.為了能將傳遞至JS的參數(shù)顯示出來,這里調(diào)用WKUIDelegate的代理方法.
/**
* WKUIDelegate 代理方法
用來監(jiān)聽webView中的alert方法
*
*/
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
//調(diào)用原生的alert方法
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提醒" message:message preferredStyle:UIAlertControllerStyleAlert];
[alert addAction:[UIAlertAction actionWithTitle:@"確定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler();
}]];
[self presentViewController:alert animated:YES completion:NULL];
}
//用來監(jiān)聽webView中的confirm方法
//- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;
//用來監(jiān)聽webView中的prompt方法
//- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler;
Ok,交互方面大致就這些內(nèi)容,關(guān)于WKWebView的代理方法還有很多,用起來也很方便,這里就沒有寫了,畢竟主題是關(guān)于交互的.
代碼在這里
References:
