彻底控制WKWebView的缩放

我们在做项目的时候经常可能会遇到需要禁止WKWebView缩放的需求。

并且同时我们可能还想要手动去控制网页的缩放比例

目前,网上对WKWebView禁止缩放,主要有两种方法:

第一种

修改webView内的scrollView的代理,让webview没有东西是可以被缩放的。

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
    return nil;
}

wkwebview在加载网页之后,会先自动适应缩放一次,如果这么做了会导致无法按系统建议的缩放比例正确的显示,并且此时你无法手动控制缩放比例调整到合适的比例,也无法调整到自己想要的比例。(因为此时代理中已经没有元素可以用来缩放了)

第二种

在html网页里边的mata标签加入user-scalable = no,若是原生js交互的话可采用注入js的方法更改meta。

- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation {
    // 禁止放大缩小
    NSString *injectionJSString = @"var script = document.createElement('meta');"
    "script.name = 'viewport';"
    "script.content=\"width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no\";"
    "document.getElementsByTagName('head')[0].appendChild(script);";
    [webView evaluateJavaScript:injectionJSString completionHandler:nil];
}

这样做的缺点,同样是你无法再手动控制缩放比例了,并且在双击、或者遇到文本输入的时候,可能还是会自动缩放。

那么如何实现WKWebView缩放的彻底控制呢?

其实我们只需要在上述第一种方法的基础上做一些完善即可。
设一个开关跟scrollView的delegate关联起来即可,让它只有在我们允许的情况下缩放。

举例:

第一步

废话^ _ ^


。。。
self.webview.navigationDelegate = self;
self.webview.scrollView.delegate = self;

第二步

我们在webview的控制类中,设立一个控制属性,比如

self.allowZoom = YES;

我们让它初始值为YES,这样在webview刚加载出网页的时候,可以让系统为我们进行合适的缩放。(如果不需要也可以一开始就设为NO)

第三步

控制scrollView的代理,让它只有在我们允许的时候,才能缩放

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
    if(self.allowZoom){
        return nil;
    }else{
        return self.webview.scrollView.subviews.firstObject;
    }
}

第四步

在网页加载完之后,(此时系统已经为我们缩放了网页),关闭缩放控制

-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
    self.allowZoom = NO;
}

手动调整缩放大小

经过刚才第四步之后,网页已经不允许再缩放了,手动设zoomScale也没用。
所以这个时候,如果需要手动调整网页缩放比例,或者是再加载下一个网页,只需要再把控制开关打开即可。

self.allowZoom = YES;
[self.webview.scrollView setZoomScale:0.8 animated:NO];

你可能感兴趣的:(彻底控制WKWebView的缩放)