iOS開發(fā)-WKWebView與JS的交互

iOS8以后,Apple公司推出了WKWebView,對比之前的UIWebView不論是處理速度還是內(nèi)存性能,都有了大幅度的提升!

那么下面我就分享一下WKWebView與JS的交互.
首先使用WKWebView.你需要導(dǎo)入WebKit #import <WebKit/WebKit.h>
然后初始化一個WKWebView,設(shè)置代理,并且執(zhí)行代理的方法.在網(wǎng)頁加載成功的時候,我們會調(diào)用一些JS代碼對網(wǎng)頁進行設(shè)置.

WKWebView的代理一共有三個:WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler

1.WKWebView調(diào)用JS方法

 /**
     iOS調(diào)用js里的navButtonAction方法并傳入兩個參數(shù)

     @param 'Xuanhe' 傳入的參數(shù)
     @param 25 傳入的參數(shù)
     @return completionHandler 回調(diào)
     */
 [self.webView evaluateJavaScript:@"navButtonAction('Xuanhe',18)" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
      NSLog(@"response:%@,error:%@",response,error);
 }];

網(wǎng)頁加載完成

//網(wǎng)頁加載完成
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
    //設(shè)置JS
    NSString *js = @"document.getElementsByTagName('h1')[0].innerText";
    //執(zhí)行JS
    [webView evaluateJavaScript:js completionHandler:^(id _Nullable response, NSError * _Nullable error) {
        NSLog(@"value: %@ error: %@", response, error);

    }];
}

通過以上操作就成功獲取到h1標(biāo)簽的文本內(nèi)容了.如果報錯,可以通過error進行相應(yīng)的錯誤處理.

2.加載JS代碼

創(chuàng)建WKWebView,并在創(chuàng)建時向JS寫入內(nèi)容.

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, kNavBarH, kScreenW, kScreenH-kNavBarH) configuration:config];
webView.navigationDelegate = self;
webView.UIDelegate = self;
   
//獲取HTML上下文的第一個h2標(biāo)簽,并寫入內(nèi)容 
NSString *js = @"document.getElementsByTagName('h2')[0].innerText = '這是一個iOS寫入的方法'";
WKUserScript*script = [[WKUserScript alloc] initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
[config.userContentController addUserScript:script];
    
[self.view addSubview:webView];

調(diào)用JS方法:

    [[webView configuration].userContentController addScriptMessageHandler:self name:@"show"];

遵循代理WKScriptMessageHandler后,調(diào)用JS的方法show;

實現(xiàn)WKScriptMessageHandler代理方法,調(diào)用JS方法后的回調(diào),可以獲取到方法名,以及傳遞的數(shù)據(jù):

//js傳遞過來的數(shù)據(jù)
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
    NSLog(@"%@",message.name);//方法名
    NSLog(@"%@",message.body);//傳遞的數(shù)據(jù)
}

獲取JS彈窗信息

遵循WKUIDelegate代理,實現(xiàn)相關(guān)代理方法:

// alert
//此方法作為js的alert方法接口的實現(xiàn)，默認彈出窗口應(yīng)該只有提示信息及一個確認按鈕，當(dāng)然可以添加更多按鈕以及其他內(nèi)容挂滓，但是并不會起到什么作用
//點擊確認按鈕的相應(yīng)事件需要執(zhí)行completionHandler亚侠，這樣js才能繼續(xù)執(zhí)行
////參數(shù) message為  js 方法 alert(<message>) 中的<message>
-(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:@"確認" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        completionHandler();
    }])];
    [self presentViewController:alertController animated:YES completion:nil];
}
// confirm
//作為js中confirm接口的實現(xiàn)鞠抑，需要有提示信息以及兩個相應(yīng)事件拨黔， 確認及取消称杨，并且在completionHandler中回傳相應(yīng)結(jié)果始苇，確認返回YES嘱函， 取消返回NO
//參數(shù) message為  js 方法 confirm(<message>) 中的<message>
-(void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler{
    
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"提示" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];
    [alertController addAction:([UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
        completionHandler(NO);
    }])];
    
    [alertController addAction:([UIAlertAction actionWithTitle:@"確認" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        completionHandler(YES);
    }])];
    
    [self presentViewController:alertController animated:YES completion:nil];
}

// prompt
//作為js中prompt接口的實現(xiàn)，默認需要有一個輸入框一個按鈕埂蕊，點擊確認按鈕回傳輸入值
//當(dāng)然可以添加多個按鈕以及多個輸入框往弓，不過completionHandler只有一個參數(shù)，如果有多個輸入框蓄氧，需要將多個輸入框中的值通過某種方式拼接成一個字符串回傳函似，js接收到之后再做處理
//參數(shù) prompt 為 prompt(<message>, <defaultValue>);中的<message>
//參數(shù)defaultText 為 prompt(<message>, <defaultValue>);中的 <defaultValue>
-(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?:@"");
    }])];
    [self presentViewController:alertController animated:YES completion:nil];
    
    
}

demo地址

還有一些其他的跳轉(zhuǎn)代理,我將新開文章來解釋.

其他拓展: Webview點擊圖片查看大圖

大家都知道，WKWebview里面并沒有查看網(wǎng)頁大圖的屬性或者方法的喉童，所以只能通過js與之交互來實現(xiàn)這一功能.基本原理是:通過JS獲取頁面所有的圖片,把這些圖片村到數(shù)組中,給圖片添加點擊事件,通過下標(biāo)顯示大圖即可.

首先創(chuàng)建WKWebView:

 NSString *url = @"http://tapi.mukr.com/mapi/wphtml/index.php?ctl=app&act=news_detail&id=VGpTSDhkemFVb3Y4Y3JXTFdRR2J4UT09";
    WKWebView *webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, kNavBarH, kScreenW, kScreenH-kNavBarH)];
    webView.navigationDelegate = self;
    [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:url]]];
    [self.view addSubview:webView];
    self.webView = webView;

加載完成后,通過注入JS方法,獲取所有圖片數(shù)據(jù)

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    [webView xh_getImageUrlWithWebView:webView];
}

注入的JS代碼,是自己寫在移動端的,可以根據(jù)需要自己修改,當(dāng)前前提是你要回前端的代碼.

- (NSArray *)xh_getImageUrlWithWebView:(WKWebView *)webView{
    //js方法遍歷圖片添加點擊事件返回圖片個數(shù)
    static  NSString * const jsGetImages =
    @"function getImages(){\
    var objs = document.getElementsByTagName(\"img\");\
    var imgUrlStr='';\
    for(var i=0;i<objs.length;i++){\
    if(i==0){\
    if(objs[i].alt==''){\
    imgUrlStr=objs[i].src;\
    }\
    }else{\
    if(objs[i].alt==''){\
    imgUrlStr+='#'+objs[i].src;\
    }\
    }\
    objs[i].onclick=function(){\
    if(this.alt==''){\
    document.location=\"myweb:imageClick:\"+this.src;\
    }\
    };\
    };\
    return imgUrlStr;\
    };";
    
    //用js獲取全部圖片
    [webView evaluateJavaScript:jsGetImages completionHandler:nil];
    
    NSString *js2 = @"getImages()";
    __block NSArray *array = [NSArray array];
    [webView evaluateJavaScript:js2 completionHandler:^(id Result, NSError * error) {
        NSString *resurlt = [NSString stringWithFormat:@"%@",Result];
        if([resurlt hasPrefix:@"#"]){
            resurlt = [resurlt substringFromIndex:1];
        }
        array = [resurlt componentsSeparatedByString:@"#"];
        [webView setMethod:array];
    }];
    return array;    
}

在點擊圖片的時候,把返回的字符串分隔為數(shù)組,數(shù)組中每個數(shù)據(jù)都是一張圖片地址.
再通過循環(huán)方法找到點擊的是第幾張圖片.

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    
    [self showBigImage:navigationAction.request];
    
    decisionHandler(WKNavigationActionPolicyAllow);
}

- (void)showBigImage:(NSURLRequest *)request {
    NSString *str = request.URL.absoluteString;
    if ([str hasPrefix:@"myweb:imageClick:"]) {
        NSString *imageUrl = [str substringFromIndex:@"myweb:imageClick:".length];
        NSArray *imgUrlArr = [self.webView getImgUrlArray];
        NSInteger index = 0;
        for (NSInteger i = 0; i < [imgUrlArr count]; i++) {
            if([imageUrl isEqualToString:imgUrlArr[i]]){
                index = i;
                break;
            }
        }
        NSLog(@"im");
    }
}

拿到點擊的圖片,也就是當(dāng)前圖片,也拿到所有的圖片數(shù)組,就可以進行圖片預(yù)覽了.

UIWebView的點擊圖片方法和WKWebView方法類似,只不過是,注入的JS的代碼,略微不同,返回的數(shù)組中最后一個數(shù)據(jù)就是當(dāng)前圖片.

demo地址

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末撇寞，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌蔑担，老刑警劉巖牌废，帶你破解...
    沈念sama閱讀 217,509評論 6贊 504
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異啤握，居然都是意外死亡鸟缕，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3贊 394
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門排抬，熙熙樓的掌柜王于貴愁眉苦臉地迎上來懂从，“玉大人，你說我怎么就攤上這事蹲蒲》Γ” “怎么了？”我有些...
    開封第一講書人閱讀 163,875評論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵届搁，是天一觀的道長缘薛。 經(jīng)常有香客問我，道長卡睦，這世上最難降的妖魔是什么掩宜？ 我笑而不...
    開封第一講書人閱讀 58,441評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮么翰，結(jié)果婚禮上牺汤，老公的妹妹穿的比我還像新娘。我一直安慰自己浩嫌，他們只是感情好檐迟，可當(dāng)我...
    茶點故事閱讀 67,488評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著码耐，像睡著了一般追迟。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上骚腥，一...
    開封第一講書人閱讀 51,365評論 1贊 302
  • 城市分裂傳說
    那天敦间，我揣著相機與錄音，去河邊找鬼束铭。 笑死廓块，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的契沫。 我是一名探鬼主播带猴，決...
    沈念sama閱讀 40,190評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼懈万！你這毒婦竟也來了拴清？” 一聲冷哼從身側(cè)響起靶病，我...
    開封第一講書人閱讀 39,062評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎口予，沒想到半個月后娄周，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,500評論 1贊 314
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡沪停，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3贊 335
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年煤辨，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片牙甫。...
    茶點故事閱讀 39,834評論 1贊 347
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖调违，靈堂內(nèi)的尸體忽然破棺而出窟哺，到底是詐尸還是另有隱情，我是刑警寧澤技肩，帶...
    沈念sama閱讀 35,559評論 5贊 345
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布且轨，位于F島的核電站，受9級特大地震影響虚婿，放射性物質(zhì)發(fā)生泄漏旋奢。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3贊 328
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一然痊、第九天 我趴在偏房一處隱蔽的房頂上張望至朗。 院中可真熱鬧，春花似錦剧浸、人聲如沸锹引。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0贊 22
  • 一樁弒父案唆香，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽嫌变。三九已至，卻和暖如春躬它，著一層夾襖步出監(jiān)牢的瞬間腾啥，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工冯吓， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留倘待，地道東北人。 一個月前我還...
    沈念sama閱讀 47,958評論 2贊 370
  • 代替公主和親
    正文 我出身青樓组贺，卻偏偏與公主長得像延柠，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子锣披，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,779評論 2贊 354