wkwebview交互的簡(jiǎn)單的使用

前言：

web頁(yè)面和app的直接的交互是很常見的東西，在ios8之前袖裕，用的是uiwebview溉瓶，但是在ios8之后堰酿，蘋果推出了WebKit這個(gè)框架，用來(lái)替代原有的UIWebView灾锯。以前的時(shí)候需要適配iOS7嗅榕，現(xiàn)在扔掉了iOS7，所以在做和web頁(yè)面的交互的時(shí)候兼雄，可以用wkwebview替代原有的uiwebview帽蝶。

WKWebView的特點(diǎn)：

  • 性能高励稳，穩(wěn)定性好，占用的內(nèi)存比較小趣避，
  • 支持JS交互
  • 支持HTML5 新特性
  • 可以添加進(jìn)度條新翎。
  • 支持內(nèi)建手勢(shì)，
  • 據(jù)說高達(dá)60fps的刷新頻率

使用及注意點(diǎn)

WKWebView只能用代碼創(chuàng)建愁拭，而且自身就支持了右滑返回手勢(shì)allowsBackForwardNavigationGestures和加載進(jìn)度estimatedProgress等一些UIWebView不具備卻非常好用的屬性亏吝。在創(chuàng)建的時(shí)候，指定初始化方法中要求傳入一個(gè)WKWebViewConfiguration對(duì)象枫攀，一般我們使用默認(rèn)配置就好来涨，但是有些地方是要根據(jù)自己的情況去做更改。比如技羔，配置中的allowsInlineMediaPlayback這個(gè)屬性卧抗，默認(rèn)為NO社裆，如果不做更改，網(wǎng)頁(yè)中內(nèi)嵌的視頻就無(wú)法正常播放标沪。

WKWebView的相關(guān)的代理方法

WKWebView的相關(guān)的代理方法分別在WKNavigationDelegate和WKUIDelegate以及WKScriptMessageHandler這個(gè)與JavaScript交互相關(guān)的代理方法嗜傅。

  • WKNavigationDelegate
    該代理提供的方法吕嘀，可以用來(lái)追蹤加載過程（頁(yè)面開始加載、加載完成趁曼、加載失敽ぁ）瘾敢、決定是否執(zhí)行跳轉(zhuǎn)簇抵。具體的使用可以看下面的代碼示例
  • WKUIDelegate
    這個(gè)代理方法全都是與界面彈出提示框相關(guān)的，所以最好是實(shí)現(xiàn)的晃财，否則的話，遇到網(wǎng)頁(yè)alert的時(shí)候罗洗，如果此代理方法沒有實(shí)現(xiàn)钢猛，則不會(huì)出現(xiàn)彈框提示命迈。
  • WKScriptMessageHandler
    這個(gè)代理方法就是實(shí)現(xiàn)和JavaScript交互相關(guān)的。下面會(huì)介紹js調(diào)用oc淑倾，oc調(diào)用js的具體的使用征椒。

具體的使用的過程

創(chuàng)建WKWebView

  • 我這里是定義了全局的變量
@interface ACViewController ()<WKNavigationDelegate,WKUIDelegate,WKScriptMessageHandler>
@property (strong, nonatomic)   WKWebView                   *wkwebView;
@property (strong, nonatomic)   UIProgressView              *progressView;//這個(gè)是加載頁(yè)面的進(jìn)度條
@end
@implementation ACViewController
{
    UILabel * label ;
    WKUserContentController * userContentController;
}
  • 創(chuàng)建
#pragma mark 初始化webview
-(void)initWKWebView
{
 WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc]init];//先實(shí)例化配置類 以前UIWebView的屬性有的放到了這里
 //注冊(cè)供js調(diào)用的方法
    userContentController =[[WKUserContentController alloc]init];
//彈出登錄
    [userContentController addScriptMessageHandler:self  name:@"loginVC"];
    
    //加載首頁(yè)
    [userContentController addScriptMessageHandler:self name:@"gotoFirstVC"];
    
    //進(jìn)入詳情頁(yè)
   [userContentController addScriptMessageHandler:self  name:@"gotodetailVC"];
configuration.userContentController = userContentController;
    configuration.preferences.javaScriptEnabled = YES;//打開js交互
    _wkwebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0.0f, screen_width, screen_height) configuration:configuration];
    
    _wkwebView.backgroundColor = [UIColor clearColor];
    _wkwebView.UIDelegate = self;
    _wkwebView.navigationDelegate = self;
    _wkwebView.allowsBackForwardNavigationGestures =YES;//打開網(wǎng)頁(yè)間的 滑動(dòng)返回
    _wkwebView.allowsLinkPreview = YES;//允許預(yù)覽鏈接
 [self initProgressView];
  [_wkwebView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];//注冊(cè)observer 拿到加載進(jìn)度
 NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:具體的網(wǎng)址]];
 [_wkwebView loadRequest:request];
[self.view addSubview:_wkwebView];
}
    ```
- 關(guān)于進(jìn)度條的監(jiān)聽

pragma mark --這個(gè)就是設(shè)置的上面的那個(gè)加載的進(jìn)度

-(void)initProgressView
{
_progressView =[[UIProgressView alloc]initWithFrame:CGRectMake(0,0, screen_width, 10.0f)];
_progressView.tintColor = [UIColor blueColor];
_progressView.trackTintColor = [UIColor whiteColor];
[self.view addSubview:_progressView];
}
//這個(gè)是檢測(cè)那個(gè)進(jìn)度條的迂尝，顯示完成之后剪芥，進(jìn)度條就隱藏了
-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context
{
if([keyPath isEqualToString:@"estimatedProgress"])
{
_progressView.hidden = NO;
CGFloat progress = [ change[@"new"] floatValue];
[_progressView setProgress:progress];

    if(progress==1.0)
    {
        _progressView.hidden =YES;
    }

}
}

- 和js交互
1.js調(diào)用oc的方法

WKScriptMessage有兩個(gè)關(guān)鍵屬性name 和 body税肪。因?yàn)槲覀兘o每一個(gè)OC方法取了一個(gè)name，所以就可以根據(jù)name 來(lái)區(qū)分執(zhí)行不同的方法锻梳。body 中存著JS 要給OC 傳的參數(shù)疑枯。

在這里我是在前面注冊(cè)了三個(gè)供js調(diào)用的方法蛔六，loginVC，gotoFirstVC具钥，gotodetailVC液兽。就是name。
在這個(gè)方法里面實(shí)現(xiàn)的
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{};
具體的代碼如下

-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
if(message.name ==nil || [message.name isEqualToString:@""])
return;
//message body : js 傳過來(lái)值
NSLog(@"message.body ==%@",message.body);
if ([message.name isEqualToString:@"loginVC"])
{
[self showLoginView];
}

else if ([message.name isEqualToString:@"gotoFirstVC"])
{
    
    [self showFirstVC];
}
//進(jìn)入詳情頁(yè)
else if ([message.name isEqualToString:@"gotodetailVC"])
{
    

   NSString*url = [message.body objectForKey:@"body"];
    
    [self gotodetial:url];
    
}

}

接下來(lái)就是具體的調(diào)用方法的實(shí)現(xiàn)了粗恢。

//彈出登陸頁(yè)面

  • (void)showLoginView
    {
    //具體看項(xiàng)目中的實(shí)現(xiàn)了
    }
    /**
    跳轉(zhuǎn)到首頁(yè)
    /
    -(void)showFirstVC{
    //具體看項(xiàng)目中的實(shí)現(xiàn)了
    }
    /    *
    跳轉(zhuǎn)到詳情頁(yè)
    */

-(void)gotodetial:(NSString *)url {
//具體看項(xiàng)目中的實(shí)現(xiàn)了
}

2.oc調(diào)用js的方法欧瘪，給js傳值
oc調(diào)用js是通過evaluateJavaScript恋追，這個(gè)方法里面的實(shí)現(xiàn)的
我這里處理的時(shí)候，是在頁(yè)面加載完成的時(shí)候嗅绸，oc給js傳值
比如我需要給js傳用戶的登錄狀態(tài)和用戶的信息撕彤，只要在加載完成的時(shí)候，調(diào)用方法蚀狰，直接給值就行职员。
代碼示例

//加載頁(yè)面數(shù)據(jù)完成
-(void)webView:(WKWebView )webView didFinishNavigation:(null_unspecified WKNavigation )navigation
{
[_wkwebView evaluateJavaScript:@"document.getElementById("content").offsetHeight;" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
//獲取頁(yè)面高度焊切，并重置webview的frame
CGFloat documentHeight = [result doubleValue];
CGRect frame = _wkwebView.frame;
frame.size.height = documentHeight+[UIScreen mainScreen].bounds.size.height-58 /顯示不全/;
_wkwebView.frame = frame;
}];
NSString *js = [NSString stringWithFormat:@"isLogin(%d)",[[UserInfoSingleton shareUserInfoSingleton] isLogin]];

// NSLog(@"%@",message.name);
//[self.wkwebView evaluateJavaScript:js completionHandler:nil];
[self.wkwebView evaluateJavaScript:js completionHandler:^(id item, NSError * _Nullable error) {

}];

NSString *js1 = [NSString stringWithFormat:@"userId(\'%@\')",[UserInfoSingleton shareUserInfoSingleton].userId];

// [self.wkwebView evaluateJavaScript:js1 completionHandler:nil];
[self.wkwebView evaluateJavaScript:js1 completionHandler:^(id item, NSError * _Nullable error) {

}];

}

- 彈窗
代碼示例

//彈窗
-(void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"提示" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];
[alertController addAction:([UIAlertAction actionWithTitle:@"確認(rèn)" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler();
}])];
[self presentViewController:alertController animated:YES completion:nil];
}
-(void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler{
// DLOG(@"msg = %@ frmae = %@",message,frame);
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"提示" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];
[alertController addAction:([UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
completionHandler(NO);
}])];
[alertController addAction:([UIAlertAction actionWithTitle:@"確認(rèn)" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler(YES);
}])];
[self presentViewController:alertController animated:YES completion:nil];
}
-(void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable))completionHandler{
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:prompt message:@"" preferredStyle:UIAlertControllerStyleAlert];
[alertController addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
textField.text = defaultText;
}];
[alertController addAction:([UIAlertAction actionWithTitle:@"完成" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler(alertController.textFields[0].text?:@"");
}])];
}

- wkwebview所有的代理方法
1.WKNavigationDelegate來(lái)追蹤加載過程

// 頁(yè)面開始加載時(shí)調(diào)用
-(void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;
// 當(dāng)內(nèi)容開始返回時(shí)調(diào)用
-(void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;
// 頁(yè)面加載完成之后調(diào)用
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;
// 頁(yè)面加載失敗時(shí)調(diào)用
-(void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;

2. WKNavigtionDelegate來(lái)進(jìn)行頁(yè)面跳轉(zhuǎn)

// 接收到服務(wù)器跳轉(zhuǎn)請(qǐng)求之后再執(zhí)行
-(void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation;
// 在收到響應(yīng)后专肪，決定是否跳轉(zhuǎn)
-(void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;
// 在發(fā)送請(qǐng)求之前刹勃，決定是否跳轉(zhuǎn)
-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;
```

  1. WKUIDelegate
//1.創(chuàng)建一個(gè)新的WebVeiw
-(nullable WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures   *)windowFeatures;
//2.WebVeiw關(guān)閉（9.0中的新方法）
-(void)webViewDidClose:(WKWebView *)webView NS_AVAILABLE(10_11, 9_0);
//3.顯示一個(gè)JS的Alert（與JS交互）
-(void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;
//4.彈出一個(gè)輸入框（與JS交互的）
-(void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler;
//5.顯示一個(gè)確認(rèn)框（JS的）
-(void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;
    ```
以上的所有的代理方法，根據(jù)自己的使用情況調(diào)用就行嚎尤。
#注意
- Objective-C在回調(diào)JavaScript的時(shí)候荔仁，WKWebView沒有辦法傳過來(lái)一個(gè)匿名函數(shù)，所以回調(diào)方式芽死，要么執(zhí)行一段JavaScript代碼乏梁，或者就是調(diào)用JavaScript那邊的一個(gè)全局函數(shù)。一般是采用后者收奔，至于Web端雖說暴露了一個(gè)全局函數(shù)，同樣可以把這一點(diǎn)代碼處理的很優(yōu)雅坪哄。Objective-C傳給JavaScript的參數(shù)，可以為Number, String, and Object。參考如下：

// 數(shù)字
NSString *js = [NSString stringWithFormat:@"方法名(%@)", number];
[self.webView evaluateJavaScript:js completionHandler:nil];
// 字符串
NSString *js = [NSString stringWithFormat:@"方法名('%@')", string];
[self.webView evaluateJavaScript:js completionHandler:nil];
// 對(duì)象
NSString *js = [NSString stringWithFormat:@"方法名(%@)", @{@"name" : @"timefor"}];
[self.webView evaluateJavaScript:js completionHandler:nil];
// 帶返回值的JS函數(shù)
[self.webView evaluateJavaScript:@"方法名()" completionHandler:^(id result, NSError * _Nullable error) {
// 接受返回的參數(shù)翩肌，result中
}];
```

  • 我在本文中寫的模暗，都是根據(jù)自己項(xiàng)目中用到的寫的，主要是在和h5交互的這塊念祭，互相傳值兑宇，調(diào)用的，都是用的自己項(xiàng)目中的方法名粱坤×ジ猓可能會(huì)好理解一些。
  • 關(guān)于導(dǎo)航欄處理的之類的站玄，這次項(xiàng)目中沒用用到枚驻，所以沒有做深入的研究，只是研究了項(xiàng)目中的問題株旷。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末再登，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子晾剖，更是在濱河造成了極大的恐慌锉矢，老刑警劉巖，帶你破解...
    沈念sama閱讀 206,214評(píng)論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件齿尽，死亡現(xiàn)場(chǎng)離奇詭異沽损，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)循头，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評(píng)論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門缠俺，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人贷岸，你說我怎么就攤上這事壹士。” “怎么了偿警？”我有些...
    開封第一講書人閱讀 152,543評(píng)論 0贊 341
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵躏救，是天一觀的道長(zhǎng)。 經(jīng)常有香客問我螟蒸，道長(zhǎng)盒使，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 55,221評(píng)論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任七嫌，我火速辦了婚禮少办，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘诵原。我一直安慰自己英妓，他們只是感情好挽放，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,224評(píng)論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蔓纠，像睡著了一般辑畦。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上腿倚，一...
    開封第一講書人閱讀 49,007評(píng)論 1贊 284
  • 城市分裂傳說
    那天纯出，我揣著相機(jī)與錄音，去河邊找鬼敷燎。 笑死暂筝，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的硬贯。 我是一名探鬼主播焕襟，決...
    沈念sama閱讀 38,313評(píng)論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼澄成！你這毒婦竟也來(lái)了胧洒？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 36,956評(píng)論 0贊 259
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤墨状，失蹤者是張志新（化名）和其女友劉穎卫漫，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體肾砂，經(jīng)...
    沈念sama閱讀 43,441評(píng)論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡列赎，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,925評(píng)論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了镐确。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片包吝。...
    茶點(diǎn)故事閱讀 38,018評(píng)論 1贊 333
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖源葫，靈堂內(nèi)的尸體忽然破棺而出诗越，到底是詐尸還是另有隱情，我是刑警寧澤息堂，帶...
    沈念sama閱讀 33,685評(píng)論 4贊 322
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布嚷狞，位于F島的核電站，受9級(jí)特大地震影響荣堰，放射性物質(zhì)發(fā)生泄漏床未。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,234評(píng)論 3贊 307
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一振坚、第九天 我趴在偏房一處隱蔽的房頂上張望薇搁。 院中可真熱鬧，春花似錦渡八、人聲如沸啃洋。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評(píng)論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)裂允。三九已至损离，卻和暖如春哥艇，著一層夾襖步出監(jiān)牢的瞬間绝编，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評(píng)論 1贊 261
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工貌踏， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留十饥，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,467評(píng)論 2贊 352
  • 代替公主和親
    正文 我出身青樓祖乳，卻偏偏與公主長(zhǎng)得像逗堵，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子眷昆，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,762評(píng)論 2贊 345

推薦閱讀更多精彩內(nèi)容