WebView自定義長按圖片功能

關(guān)于Webview長按圖片功能告喊，系統(tǒng)默認(rèn)自帶菜單彈窗闪檬，但是某些場景我們需要自定義菜單功能晨抡，此時就需要屏蔽系統(tǒng)彈窗氛悬，實現(xiàn)自己的彈窗方式则剃。
因為iOS12之后 UIWebview蘋果將要廢棄，所以這里以 WKWebview舉例說明如捅。

下面介紹幾個用到JS代碼：

屏蔽系統(tǒng)彈窗

// 當(dāng)長按時棍现，禁止或顯示系統(tǒng)默認(rèn)菜單
document.documentElement.style.webkitTouchCallout='none';
//當(dāng)長按時，禁止選擇內(nèi)容
document.documentElement.style.webkitUserSelect='none';

通過坐標(biāo)獲取某個HTML標(biāo)簽元素

// 通過坐標(biāo)獲取某個位置的元素
let element = document.elementFromPoint(x,y);

判斷標(biāo)簽元素是否包含某個屬性

// 是否包含 app-press-disabled 屬性镜遣，如果包含己肮，說明該標(biāo)簽不允許長按事件(我們自定義協(xié)定)
let isCanLong = element.getAttribute("app-press-disabled") == null;

考慮部分場景不需要長按圖片的功能，所以可以通過一個協(xié)定好的屬性來當(dāng)做長按開關(guān)悲关，比如我們用 app-press-disabled 屬性來標(biāo)示禁止某個元素長按手勢打開谎僻，當(dāng) html標(biāo)簽中存在 app-press-disabled 屬性，如：<img src='https://image_url' app-press-disabled>寓辱，此圖片長按無效（具體規(guī)則可以自己定義）艘绍。

獲取元素標(biāo)簽名稱判斷是否是某個標(biāo)簽

// 是否是圖片 IMG標(biāo)簽
 let isImgTag = element.tagName.toLowerCase() == "img";

好，以上js代碼夠我們完成功能秫筏，我們將以上代碼寫入一個js文件：

// JavaScript 文件 GGWebLongPressImage.js
// 本段js用于webview長按圖片功能設(shè)計
//

// 關(guān)閉webview自帶的長按事件和彈窗
document.documentElement.style.webkitTouchCallout='none';
document.documentElement.style.webkitUserSelect='none';

// 判斷圖片是否可以觸發(fā)長按事件腳本
// 參數(shù)：point坐標(biāo)
// 返回：String,如果識別圖片返回圖片地址诱鞠，否則返回 "not_image"
function app_isLongPressImageWithPoint(x,y) {

    // 通過坐標(biāo)獲取某個位置的元素
    let element = document.elementFromPoint(x,y);

    // 是否包含 app-press-disabled 屬性，如果包含这敬，說明該標(biāo)簽不允許長按事件(我們自定義協(xié)定)
    let isCanLong = element.getAttribute("app-press-disabled") == null;

    // 是否是 IMG標(biāo)簽
    let isImgTag = element.tagName.toLowerCase() == "img";

    if (isCanLong && isImgTag) {
        return element.src;
    }else {
        return "not_image";
    }
}

JS腳本代碼準(zhǔn)備完畢航夺，效果為如果長按坐標(biāo)位置為圖片返回圖片URL，如果不為圖片或者不滿足長按條件鹅颊，返回 "not_image"敷存。
為了盡量解耦代碼，我們把此功能單獨寫到WKWebview 的分類中堪伍。創(chuàng)建分類：

WKWebView+LongPress.h

為了保證每個頁面此段js生效锚烦，我們將js代碼插入WKWebview的 userScripts，保證每個頁面腳本代碼生效帝雇。

/// 加入JS腳本代碼
- (void)addJsCode {
    //獲取網(wǎng)頁的根域名
    NSString *jsCode = [WKWebView loadJsCodeWithFileName:@"GGWebLongPressImage" withType:@"js"];
    if (jsCode) {
        WKUserScript *cookieInScript = [[WKUserScript alloc] initWithSource:jsCode injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO];
        [self.configuration.userContentController addUserScript:cookieInScript];
    }
}

/// 讀取本地js文件
+ (NSString *)loadJsCodeWithFileName:(NSString *)name withType:(NSString *)type {
    NSString *filePath = [[NSBundle mainBundle] pathForResource:name ofType:type];
    NSString *jsCode = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
    return jsCode;
}

添加長按手勢：

/// 添加長按手勢
- (void)addLongPressGesture {
    // 添加長按手勢
    UILongPressGestureRecognizer *longGes = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(onLongPressHandler:)];
    longGes.cancelsTouchesInView = NO;
    longGes.delegate = self;
    [self addGestureRecognizer:longGes];
    
    // 植入js腳本
    [self addJsCode];
}

打開webview多手勢開關(guān)涮俄，前提判斷如果手勢為長按事件

/// 多手勢開關(guān)
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
    //只有當(dāng)手勢為長按手勢時反饋，飛長按手勢將阻止尸闸。
    return [otherGestureRecognizer isKindOfClass:[UILongPressGestureRecognizer class]];
}

長按手勢selector實現(xiàn)：

// 長按手勢觸發(fā)調(diào)用
- (void)onLongPressHandler:(UILongPressGestureRecognizer *)longPress {
    
    if (longPress.state == UIGestureRecognizerStateBegan) {
                
        CGPoint pt = [longPress locationInView:self];
        
        // 執(zhí)行剛才的js代碼彻亲，判斷是否滿足長按需求并且為圖片
        NSString *checkLongJs = [NSString stringWithFormat:
                                 @"app_isLongPressImageWithPoint(%f,%f)",
                                 pt.x,pt.y];
        
        
        // 執(zhí)行拼接好的腳本代碼
        [self evaluateJavaScript:checkLongJs completionHandler:^(NSString* callBackString, NSError * _Nullable error) {
            imageUrl = callBackString;
            
            if(![imageUrl isEqualToString:@"not_image"]) { //滿足長按圖片條件
              //拿到圖片的url，業(yè)務(wù)代碼處理
            }
        }];
    }
}

以上基本完成長按圖片的功能吮廉。

但是我們發(fā)現(xiàn)長按圖片雖然生效苞尝，但是松手的時候，如果圖片有其他點擊響應(yīng)宦芦，點擊事件也被觸發(fā)宙址，頁面會加載。

我們這里通過延時處理解決的這個問題：
通過一個屬性判斷是否為長按事件调卑，如果為長按事件抡砂，手指離開屏幕時大咱，禁止頁面跳轉(zhuǎn)，完整代碼如下：

WKWebView+LongPress.h

#import <WebKit/WebKit.h>

// 長按協(xié)議
@protocol WKLongPressDelegate <NSObject>
- (void)webViewOnLongPressHandlerWithWebView:(WKWebView *)webView withImageUrl:(NSString *)imageUrl;
@end

@interface WKWebView (LongPress)<UIGestureRecognizerDelegate>

/// 長按手勢代理
@property (nonatomic, weak) id<WKLongPressDelegate> longPressDelegate;

/**
 是否可以跳轉(zhuǎn)注益，主要用于解決長按事件后碴巾，頁面再次跳轉(zhuǎn)問題
 *  YES: 不可以，NO可以
 */
@property (nonatomic, assign)  BOOL isNotPushLink;


/**
 添加長按手勢
 */
- (void)addLongPressGesture;

@end

WKWebView+LongPress.m

#import "WKWebView+LongPress.h"
#import <objc/runtime.h>

@implementation WKWebView (LongPress)

#pragma mark @property -setter getter
@dynamic longPressDelegate;

- (void)setLongPressDelegate:(id<WKLongPressDelegate>)longPressDelegate {
    objc_setAssociatedObject(self, @selector(longPressDelegate), longPressDelegate, OBJC_ASSOCIATION_ASSIGN);
}

- (id)longPressDelegate {
    return objc_getAssociatedObject(self, _cmd);
}

- (void)setIsNotPushLink:(BOOL)isNotPushLink {
    objc_setAssociatedObject(self, @selector(isNotPushLink), [NSNumber numberWithBool:isNotPushLink], OBJC_ASSOCIATION_ASSIGN);
}

- (BOOL)isNotPushLink {
    return [objc_getAssociatedObject(self, _cmd) boolValue];
}
#pragma mark - End

/**
 添加長按手勢
 */
- (void)addLongPressGesture {
    // 添加長按手勢
    UILongPressGestureRecognizer *longGes = [[UILongPressGestureRecognizer alloc] initWithTarget:self
                                                                                          action:@selector(onLongPressHandler:)];
    longGes.cancelsTouchesInView = NO;
    longGes.delegate = self;
    [self addGestureRecognizer:longGes];
    // 植入js腳本
    [self addJsCode];
}

/**
 加入JS腳本代碼
 */
- (void)addJsCode {
    //獲取網(wǎng)頁的根域名
    NSString *jsCode = [WKWebView loadJsCodeWithFileName:@"GGWebLongPressImage" withType:@"js"];
    if (jsCode) {
        WKUserScript *cookieInScript = [[WKUserScript alloc] initWithSource:jsCode
                                                              injectionTime:WKUserScriptInjectionTimeAtDocumentStart
                                                           forMainFrameOnly:NO];
        [self.configuration.userContentController addUserScript:cookieInScript];
    }
}

/// 是否實現(xiàn)了長按代理
- (BOOL)isOpenLongPressDelegate {
    return (self.longPressDelegate && [self.longPressDelegate respondsToSelector:@selector(webViewOnLongPressHandlerWithWebView:withImageUrl:)]);
}


/// 多手勢開關(guān)
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
    //只有當(dāng)手勢為長按手勢時反饋丑搔，飛長按手勢將阻止厦瓢。
    return [otherGestureRecognizer isKindOfClass:[UILongPressGestureRecognizer class]];
}

// 長按手勢觸發(fā)調(diào)用
- (void)onLongPressHandler:(UILongPressGestureRecognizer *)longPress {
    
    if (![self isOpenLongPressDelegate]) {
        return;
    }
    
    if (longPress.state == UIGestureRecognizerStateBegan) {
        
        self.isNotPushLink = YES;
        
        __weak typeof(self) weakSelf = self;
        __block NSString *imageUrl = nil;
        
        CGPoint pt = [longPress locationInView:self];
        
        // 判斷是否滿足長按需求
        NSString *checkLongJs = [NSString stringWithFormat:
                                 @"app_isLongPressImageWithPoint(%f,%f)",
                                 pt.x,pt.y];
        
        
        // 如果圖片有點擊事件，不觸發(fā)長按響應(yīng)
        [self evaluateJavaScript:checkLongJs completionHandler:^(NSString* callBackString, NSError * _Nullable error) {
            imageUrl = callBackString;
            
            if(![imageUrl isEqualToString:@"not_image"]) { //滿足長按圖片條件
                if ([weakSelf isOpenLongPressDelegate]) {
                    [weakSelf.longPressDelegate webViewOnLongPressHandlerWithWebView:self withImageUrl:imageUrl];
                }
            }
        }];
        
    } else if(longPress.state == UIGestureRecognizerStateEnded ||
              longPress.state == UIGestureRecognizerStateCancelled ||
              longPress.state == UIGestureRecognizerStateFailed) {
        //延時0.2秒后低匙，取消webview不可跳轉(zhuǎn)鏈接狀態(tài),解決長按跳轉(zhuǎn)問題
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 0.2 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
            self.isNotPushLink = NO;
        });
    }
}

/**
 讀取本地js文件
 
 @param name 文件名稱
 @param type 文件類型
 @return 返回js代碼
 */
+ (NSString *)loadJsCodeWithFileName:(NSString *)name withType:(NSString *)type {
    
    NSError *error = nil;
    NSString *filePath = [[NSBundle mainBundle] pathForResource:name ofType:type];
    NSString *jsCode = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:&error];
    if (error) { NSLog(@"讀取js文件失敗:error:%@",error); }
    return jsCode;
}

@end

這個分類完成長按圖片的所有功能旷痕。

如何使用?

#import "WKWebView+LongPress.h"

//實現(xiàn) WKLongPressDelegate 代理

//初始化 WKWebView
  WKWebView* webView = ....;

// 實現(xiàn)長按web圖片代理
  webView.longPressDelegate = self;
// 添加長按手勢
  [webView addLongPressGesture];

//實現(xiàn)WKNavigationDelegate方法
- (void)webView:(WKWebView*)webView decidePolicyForNavigationAction:(WKNavigationAction*)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{

  // 如果為長按操作，中斷頁面加載
    if (webView.isNotPushLink) { decisionHandler(WKNavigationActionPolicyCancel); return; }
    
    decisionHandler(WKNavigationActionPolicyAllow);
}

// 實現(xiàn)長按webview中的圖片代理顽冶，當(dāng)滿足自定義條件后觸發(fā)
- (void)webViewOnLongPressHandlerWithWebView:(WKWebView *)webView withImageUrl:(NSString *)imageUrl {
    
    // 處理長按圖片業(yè)務(wù)代碼欺抗， 如彈框展示 保存圖片、識別二維碼 等
}

方式雖然簡單暴力强重，但是確實能解決長按跳轉(zhuǎn)的燃眉之急绞呈。
UIWebView也是同樣邏輯處理即可。