前言
iOS8以后,Apple公司推出了WKWebView,對比之前的UIWebView不論是處理速度還是內存性能,都有了大幅度的提升!
那么下面我就分享一下WKWebView與JS的交互.
首先使用WKWebView.你需要導入WebKit #import
然后初始化一個WKWebView,設置代理,并且執行代理的方法.在網頁加載成功的時候,我們會調用一些JS代碼對網頁進行設置.
WKWebView的代理一共有三個:WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler
1.WKWebView調用JS方法
/** iOS調用js里的navButtonAction方法并傳入兩個參數 @param 'Xuanhe' 傳入的參數 @param 25 傳入的參數 @return completionHandler 回調 */ [self.webView evaluateJavaScript:@"navButtonAction('Xuanhe',18)" completionHandler:^(id _Nullable response, NSError * _Nullable error) { NSLog(@"response:%@,error:%@",response,error); }];網頁加載完成
//網頁加載完成-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{ //設置JS NSString *js = @"document.getElementsByTagName('h1')[0].innerText"; //執行JS [webView evaluateJavaScript:js completionHandler:^(id _Nullable response, NSError * _Nullable error) { NSLog(@"value: %@ error: %@", response, error); }];}通過以上操作就成功獲取到h1標簽的文本內容了.如果報錯,可以通過error進行相應的錯誤處理.
2.加載JS代碼
創建WKWebView,并在創建時向JS寫入內容.
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標簽,并寫入內容 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];調用JS方法:
[[webView configuration].userContentController addScriptMessageHandler:self name:@"show"];
遵循代理WKScriptMessageHandler后,調用JS的方法show;
實現WKScriptMessageHandler代理方法,調用JS方法后的回調,可以獲取到方法名,以及傳遞的數據:
//js傳遞過來的數據-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{ NSLog(@"%@",message.name);//方法名 NSLog(@"%@",message.body);//傳遞的數據}獲取JS彈窗信息
遵循WKUIDelegate代理,實現相關代理方法:
// alert//此方法作為js的alert方法接口的實現，默認彈出窗口應該只有提示信息及一個確認按鈕，當然可以添加更多按鈕以及其他內容，但是并不會起到什么作用//點擊確認按鈕的相應事件需要執行completionHandler，這樣js才能繼續執行////參數 message為 js 方法 alert() 中的-(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接口的實現，需要有提示信息以及兩個相應事件， 確認及取消，并且在completionHandler中回傳相應結果，確認返回YES， 取消返回NO//參數 message為 js 方法 confirm() 中的-(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接口的實現，默認需要有一個輸入框一個按鈕，點擊確認按鈕回傳輸入值//當然可以添加多個按鈕以及多個輸入框，不過completionHandler只有一個參數，如果有多個輸入框，需要將多個輸入框中的值通過某種方式拼接成一個字符串回傳，js接收到之后再做處理//參數 prompt 為 prompt(,);中的//參數defaultText 為 prompt(,);中的-(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地址
還有一些其他的跳轉代理,我將新開文章來解釋.
其他拓展: Webview點擊圖片查看大圖
大家都知道，WKWebview里面并沒有查看網頁大圖的屬性或者方法的，所以只能通過js與之交互來實現這一功能.基本原理是:通過JS獲取頁面所有的圖片,把這些圖片村到數組中,給圖片添加點擊事件,通過下標顯示大圖即可.
首先創建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方法,獲取所有圖片數據
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation { [webView xh_getImageUrlWithWebView:webView];}注入的JS代碼,是自己寫在移動端的,可以根據需要自己修改,當前前提是你要回前端的代碼.
- (NSArray *)xh_getImageUrlWithWebView:(WKWebView *)webView{ //js方法遍歷圖片添加點擊事件返回圖片個數 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; }在點擊圖片的時候,把返回的字符串分隔為數組,數組中每個數據都是一張圖片地址.
再通過循環方法找到點擊的是第幾張圖片.
- (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"); }}拿到點擊的圖片,也就是當前圖片,也拿到所有的圖片數組,就可以進行圖片預覽了.
UIWebView的點擊圖片方法和WKWebView方法類似,只不過是,注入的JS的代碼,略微不同,返回的數組中最后一個數據就是當前圖片.
demo地址
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對武林網的支持。
新聞熱點
疑難解答
