WKWebView 獲取網頁高度，圖片點選檢視，網頁連結點選

JOily_H發表於2021-03-03

WebView網頁

#import <WebKit/WebKit.h>

籤協議 WKNavigationDelegate

@property (nonatomic, strong) WKWebView *newsWebView;

(void)createView{

self.newsWebView = [[WKWebView alloc] init];

self.newsWebView.frame = CGRectMake(0, 0, WIDTH, HEIGHT);

self.newsWebView.navigationDelegate = self;

self.newsWebView.scrollView.scrollEnabled = NO;

/// 新增監聽網頁高度，，將網頁作為tableview的頭檢視

[self.newsWebView addObserver:self forKeyPath:@”scrollView.contentSize”options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:@”DJWebKitContext”];

}

#pragma mark 網頁開始載入

(void)webView:(WKWebView )webView didStartProvisionalNavigation:(WKNavigation)navigation{

}

#pragma mark 網頁載入完成

(void)webView:(WKWebView )webView didFinishNavigation:(WKNavigation)navigation{

/// 給網頁中的圖片新增點選方法

[self addImgClickJS];

}

/// 給網頁中的圖片新增點選方法

(void)addImgClickJS {

//新增圖片點選的回撥

[self.newsWebView evaluateJavaScript:@”function registerImageClickAction(){

var imgs = document.getElementsByTagName(‘img’);

for(var i=0;i<imgs.length;i++){

imgs[i].customIndex = i;

imgs[i].onclick=function(){

window.location.href=’’+this.src;

}

}

}” completionHandler:nil];

[self.newsWebView evaluateJavaScript:@”registerImageClickAction();”completionHandler:nil];

///// 所有圖片點選滑動檢視新增以下程式碼單圖片檢視不需要新增

[self.newsWebView evaluateJavaScript:@“function getImages(){

 var imgs = document.getElementsByTagName('img');

 var imgScr = '';

 for(var i=0;i<imgs.length;i++){

 if (i == 0){

 imgScr = imgs[i].src;

 } else {

 imgScr = imgScr +'***'+ imgs[i].src;

 }

 };

 return imgScr;

 };” completionHandler:nil];//注入js方法

[self.newsWebView evaluateJavaScript:@"getImages()" completionHandler:^(id _Nullable result, NSError * _Nullable error) {

    if (!error) {

        self.imagesArr = result?[NSMutableArray arrayWithArray:[result componentsSeparatedByString:@"***"]]:

        nil;

    }

}];

}

#pragma mark 監聽網頁的內容高度

-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{

if (!self.newsWebView.isLoading) {

    if([keyPath isEqualToString:@"scrollView.contentSize"]){

        self.newsWebView.frame = CGRectMake(0, 0, WIDTH,self.newsWebView.scrollView.contentSize.height);

        self.newsTableView.tableHeaderView = self.newsWebView;

    }

}

}

#pragma mark 頁面載入失敗時呼叫

(void)webView:(WKWebView )webView didFailProvisionalNavigation:(WKNavigation)navigation {

}

#pragma mark 在傳送請求之前，決定是否跳轉

(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{

NSString *path = [navigationAction.request.URL.absoluteStringstringByRemovingPercentEncoding];

// NSLog(@”-=-=-==-=%@”,path);

/// 主頁面載入

if ([path isEqualToString:@"about:blank"]) {

    decisionHandler(WKNavigationActionPolicyAllow);

}else{

    /// 圖片的點選處理

    if ([path hasSuffix:@".png"]||[path hasSuffix:@".jpg"]||[pathhasSuffix:@".jpeg"]) {

        //// 檢視圖片內容（pod "MWPhotoBrowser", :[Git](http://lib.csdn.net/base/git "Git知識庫") =>'<https://github.com/EvoIos/MWPhotoBrowser>.[git](http://lib.csdn.net/base/git "Git知識庫")', :commit =>'de697e101195557ddca85661ebb266fd3f10776c’

）

//// 單個圖片檢視

MWPhoto *photo = [[MWPhoto alloc] initWithURL[NSURLURLWithString:path]];

_photosBrowser = [[MWPhotoBrowser alloc] initWithPhotos:@[photo]];

/// 所有圖片滑動檢視用下面一段替換上面兩行

NSMutableArray *photoarr = [NSMutableArray array];

        for (NSString *url in self.imagesArr) {

            MWPhoto *photo = [[MWPhoto alloc] initWithURL:[NSURL URLWithString:url]];

            [photoarr addObject:photo];

        }

        _photosBrowser = [[MWPhotoBrowser alloc] initWithPhotos:photoarr];

        if ([self.imagesArr containsObject:path]) {

            NSInteger k = [self.imagesArr indexOfObject:path];

            [_photosBrowser setCurrentPhotoIndex:k];

        }else{

            [_photosBrowser setCurrentPhotoIndex:0];

        }

UINavigationController *nan = [[UINavigationController alloc] initWithRootViewController:_photosBrowser];

_photosBrowser.navigationItem.leftBarButtonItem = [[UIBarButtonItemalloc] initWithImage:[UIImage imageNamed:@”navBack”]style:UIBarButtonItemStylePlain target:self action:@selector(PhotobackAction)];

        nan.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;

        [self presentViewController:nan animated:YES completion:^{

        }];

        /// 其他網頁連線的處理

    }else if ([FLGPanduanTool isWebURL:path]){

        if ([path hasPrefix:@"<http://cznews.cz001.com.cn/html/wap/detail>.[PHP](http://lib.csdn.net/base/php "PHP知識庫")?pid="]) {

            FLGNewsDetailViewController *detail = [[FLGNewsDetailViewControlleralloc] init];

            detail.newsID = [path substringFromIndex:51];

            [self.navigationController pushViewController:detail animated:YES];

        }else{

            //// pod 'TOWebViewController', '~> 2.2.6'

            TOWebViewController *webVC = [[TOWebViewController alloc] initWithURLString:path];

            UINavigationController *nan = [[UINavigationController alloc] initWithRootViewController:webVC];

            nan.navigationBar.translucent = NO;

            nan.navigationBar.barTintColor = baseColor;

            nan.navigationBar.barStyle = UIStatusBarStyleLightContent;

            [nan.navigationBar setTitleTextAttributes:@{NSFontAttributeName:[UIFont fontWithName:@"Helvetica-Bold" size:19],NSForegroundColorAttributeName:[UIColor whiteColor]}];

            nan.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;

            [self presentViewController:nan animated:YES completion:^{

            }];

        }

    }

    decisionHandler(WKNavigationActionPolicyCancel);

}

}

web的圖片點選

//這個是網頁載入完成，導航的變化

-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {

[self addImgClickJS];

}

(void)addImgClickJS {

//獲取所以的圖片標籤

[self.wkWebView evaluateJavaScript:@”function getImages(){

   var imgs = document.getElementsByTagName('img');

   var imgScr = '';

   for(var i=0;i<imgs.length;i++){

       if (i == 0){

          imgScr = imgs[i].src;

       } else {

          imgScr = imgScr +'***'+ imgs[i].src;

       }

   };

   return imgScr;

};” completionHandler:nil];//注入js方法

__weak typeof(self)weakSelf = self;

[self.wkWebView evaluateJavaScript:@”getImages()” completionHandler:^(id _Nullable result, NSError * _Nullable error) {

  if (!error) {

      NSMutableArray * urlArray = result?[NSMutableArray arrayWithArray:[result componentsSeparatedByString:@"***"]]:nil;

      NSLog(@"urlArray = %@",urlArray);

      weakSelf.imageUrlArr = urlArray;

  } else {

      weakSelf.imageUrlArr = nil;

  }

}];

//新增圖片點選的回撥

[self.wkWebView evaluateJavaScript:@”function registerImageClickAction(){

   var imgs = document.getElementsByTagName('img');

   for(var i=0;i<imgs.length;i++){

       imgs[i].customIndex = i;

       imgs[i].onclick=function(){

          window.location.href='image-preview-index:'+this.customIndex;

       }

   }

}” completionHandler:nil];

[self.wkWebView evaluateJavaScript:@”registerImageClickAction();” completionHandler:nil];

}

(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {

// 類似 UIWebView 的 -webView: shouldStartLoadWithRequest: navigationType:

//預覽圖片

NSURL * url = navigationAction.request.URL;

if ([url.scheme isEqualToString:@”image-preview-index”]) {

  //圖片點選回撥

  NSInteger index = [[url.absoluteString substringFromIndex:[@"image-preview-index:" length]] integerValue];

  NSString * imgPath = self.imageUrlArr.count > index?self.imageUrlArr[index]:nil;

  NSLog(@"imgPath = %@",imgPath);

  decisionHandler(WKNavigationActionPolicyCancel);

} else {

  decisionHandler(WKNavigationActionPolicyAllow);

}

當計算高度使用監聽方法出現問題的時候（plus 機型上拉記載出現抖動）可以換一種方法

#pragma mark 網頁載入完成

(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{

[self performSelector:@selector(loadHeight) withObject:self afterDelay:1];

}

一定要在1s延時之後才能正確獲取網頁高度

(void)loadHeight{

self.detailTableView.hidden = NO;

CGFloat height = 0.0;

[self.detailWebView sizeToFit];

height = self.detailWebView.scrollView.contentSize.height;

CGRect webFrame = self.detailWebView.frame;

webFrame.size.height = height;

self.detailWebView.frame = webFrame;

self.headView.frame = CGRectMake(0, 0, WIDTH, 90FITWIDTH+height+100FITWIDTH);

self.detailTableView.tableHeaderView = self.headView;

[self hiddenSVProgress];

}

不用延時1s的方法

[webView evaluateJavaScript:@”document.body.scrollHeight”completionHandler:^(id _Nullable result,NSError * _Nullable error){

    CGFloat height = [result floatValue];

    self.newsWebView.frame = CGRectMake(0, 0, self.contentView.frame.size.width, height);

    [self.delegate webViewDidFinishLoad:height cellIndex:self.indexPath];

}];

本作品採用《CC 協議》，轉載必須註明作者和本文連結

讓網頁上的超連結失效，不能點選
2011-02-07
網頁
javascript獲取網頁的高度
2017-04-14
JavaScript網頁
設定網頁圖片熱點連結以及座標值
2013-07-07
網頁
點選返回網頁頂層效果
2017-02-10
網頁
Chrome 獲取網頁顏色（文字、圖片）
2022-04-06
Chrome網頁
短視訊平臺開發，點選連結、圖片自動跳轉到新的頁面
2022-06-27
在網頁中新增點選列印功能
2017-04-13
網頁
網頁點選實現下載效果
2017-02-27
網頁
織夢點選圖片實現下一頁功能
2021-02-27
網頁，網站點選qq圖示，加qq，開啟對方qq的網頁程式碼
2019-05-11
網頁網站
jquery點選返回網頁頂部程式碼
2017-04-05
jQuery網頁
Google 知道你點選了哪個網頁
2016-05-21
Go網頁
IOS遍歷網頁獲取網頁中<img>標籤中的圖片url
2016-05-07
iOS網頁
點選連結跳轉到應用指定頁面
2018-12-25
點選可以平滑定位到網頁指定位置
2017-04-02
網頁
web前端頁面點選預覽圖片及大小縮放
2020-10-19
Web前端
python四種方式解析網頁獲取頁面中的連結
2020-12-31
Python網頁
短視訊app原始碼，點選檢視圖片，雙指放大
2022-01-03
APP原始碼
［分享］iOS開發－圖片點選點選放大
2016-03-02
iOS
視訊直播app原始碼，點選圖片放大再點選縮小
2022-04-15
APP原始碼
node：爬蟲爬取網頁圖片
2019-02-16
爬蟲網頁
JS互動點選WKWebView中的圖片實現預覽效果
2018-01-22
JSWebView
網頁點選選擇設定文字不同顏色程式碼例項
2017-04-01
網頁
具有彈性的點選返回網頁頂部程式碼
2017-02-11
網頁
Android使用WebView嵌入網頁，網頁內點選跳轉到另一個網頁後，返回問題解決
2014-10-09
AndroidWebView網頁
點選就能設計出活動海拔的方法，線上網頁一鍵出圖！
2023-03-15
網頁
webview獲取網頁title
2017-12-22
WebView網頁
網頁的“六度分隔理論”：從一個網頁到另外一個網頁，最多隻需19次點選
2013-02-20
網頁
jQuery連結點選變色點選其他還原
2017-11-01
jQuery
捕獲Android文字中連結點選事件
2015-07-26
Android事件
頁面點選頻次是如何影響網站排名呢？
2020-06-10
網站
js點選返回網頁頂部程式碼例項詳解
2017-04-05
JS網頁
點選載入更多網頁內容效果簡單介紹
2017-04-06
網頁
防止點選退格鍵使網頁後退例項程式碼
2017-02-25
網頁
網頁點選後退再前進出現亂碼原因
2007-10-10
網頁
JavaScript 點選頁面其他地方關閉視窗
2019-01-31
JavaScript
javascript如何獲取圖片的高度
2017-04-06
JavaScript
QWebView獲取網頁原始碼
2018-11-01
WebView網頁原始碼

WKWebView 獲取網頁高度，圖片點選檢視，網頁連結點選

#import <WebKit/WebKit.h>

web的圖片點選

相關文章