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 協議》，轉載必須註明作者和本文連結

Chrome 獲取網頁顏色（文字、圖片）
2022-04-06
Chrome網頁
短視訊平臺開發，點選連結、圖片自動跳轉到新的頁面
2022-06-27
寫一個網頁點選的特效
2024-12-08
網頁特效
網頁，網站點選qq圖示，加qq，開啟對方qq的網頁程式碼
2019-05-11
網頁網站
織夢點選圖片實現下一頁功能
2021-02-27
點選連結跳轉到應用指定頁面
2018-12-25
python四種方式解析網頁獲取頁面中的連結
2020-12-31
Python網頁
web前端頁面點選預覽圖片及大小縮放
2020-10-19
Web前端
短視訊app原始碼，點選檢視圖片，雙指放大
2022-01-03
APP原始碼
node：爬蟲爬取網頁圖片
2019-02-16
爬蟲網頁
HTML網頁根據座標模擬滑鼠點選
2024-05-20
HTML網頁
視訊直播app原始碼，點選圖片放大再點選縮小
2022-04-15
APP原始碼
網頁佈局-----input點選時出現黑色邊框
2024-05-13
網頁
點選驗證圖片
2022-12-15
點選頁面愛心效果
2018-05-30
頁面點選頻次是如何影響網站排名呢？
2020-06-10
網站
Python應用開發——爬取網頁圖片
2022-09-21
Python網頁
點選就能設計出活動海拔的方法，線上網頁一鍵出圖！
2023-03-15
網頁
JavaScript 點選頁面其他地方關閉視窗
2019-01-31
JavaScript
QWebView獲取網頁原始碼
2018-11-01
WebView網頁原始碼
防止頁面按鈕多次點選
2024-05-21
請教下在影片播放頁面 - 不會操作獲取元素進行點選操作
2024-04-12
app直播原始碼，uniapp點選按鈕儲存頁面為圖片到本地
2023-04-11
APP原始碼
java 爬取網頁內容。標題、圖片等
2021-09-24
Java網頁
檢視HTML網頁滑鼠位置
2024-05-20
HTML網頁
選擇select下拉選單網頁跳轉
2018-07-12
網頁
圖片區域點選處理
2024-10-27
後臺展示圖片點選放大
2024-05-28
js/jq 獲取網頁寬高
2018-12-12
JS網頁
iOS 封裝頁數控制，點選NavigationTabBar切換頁面
2018-04-18
iOS封裝NavigationtabBar
直播商城系統原始碼，點選按鈕儲存頁面為圖片到本地
2022-12-08
原始碼
如何修改網頁文字或圖片?
2024-10-07
網頁
獲取滑鼠左鍵點選 creator 3.8
2024-09-11
探究 | 如何捕獲一個Activity頁面上所有的點選行為
2020-12-03
獲取網路圖片的大小
2019-03-04
點選連結取消跳轉效果
2018-11-10
點選連結背景變色效果
2018-09-08
直播網站原始碼，Android中點選圖片放大的簡單方法
2023-03-31
網站原始碼Android

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

#import <WebKit/WebKit.h>

web的圖片點選

相關文章