iOS - 获取WKWebView内容的高度并设置字体大小

在大多是情况下，如果一个界面完全是由网页组成的时候我们也许不需要考虑获取wkwebview的高度，但是如果说界面比较的复杂，当webview在一个scrollView上的时候，我们可能就需要动态的获取webview的高度实现scrollView中contectSize的滑动。
WKWebView的基本使用
 iOS - WKWebView点击链接跳转并获取新页面的URL

层级结构图

可以发现当webview的y值不是在红色背景的scroolView顶部的时候，下面会被遮盖住。所以这时候我们需要动态的获取页面的高度然后赋值给scrollView的contentSize的高度上去。

代码如下：

#pragma mark - WKNavigationDelegate
// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
    
    //获取网页的高度
    [webView evaluateJavaScript:@"document.body.scrollHeight"completionHandler:^(id _Nullable result,NSError * _Nullable error){
        self.wbContentHeight = [result floatValue];
        self.detailIntroduceWebView.height = self.wbContentHeight ;
        self.mainScrollView.contentSize = CGSizeMake(kScreenWidth, self.detailIntroduceWebView.maxY + 49) ;
    }];
}

说明：我们通过：
“
/* @abstract Evaluates the given JavaScript string.
@param javaScriptString The JavaScript string to evaluate.
@param completionHandler A block to invoke when script evaluation completes or fails.
@discussion The completionHandler is passed the result of the script evaluation or an error.
*/
-(void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;”

方法来实现OC与JS的交互获取到了网页的高度。然后改变scrollView的滑动范围：self.mainScrollView.contentSize = CGSizeMake(kScreenWidth,，self.detailIntroduceWebView.maxY + 49) ;
这样实现高度的适应。这里得注意，应该要取消网页的滑动效果。不然会出现手势的冲突。

改变网页字体大小和字体颜色的方法：

// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
    
    //修改字体大小（方法一）
    NSString *fontSize = [NSString stringWithFormat:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '%d%%'",125];
    [ webView evaluateJavaScript:fontSize completionHandler:nil];

    
    //修改字体颜色
    NSString *colorString = [NSString stringWithFormat:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor= '#364857'"];
    [webView evaluateJavaScript:colorString completionHandler:nil];
}

修改字体大小的方法二：通过 preference.minimumFontSize 来设置
代码如下：

//js脚本
    NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
    
    //注入
    WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
    
    WKUserContentController *wkUController = [[WKUserContentController alloc] init];
    [wkUController addUserScript:wkUScript];
    
    //配置对象
    WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
    wkWebConfig.userContentController = wkUController;
    // 创建设置对象
    WKPreferences *preference = [[WKPreferences alloc]init];
    // 设置字体大小(最小的字体大小)
    preference.minimumFontSize = 28 ;
    // 设置偏好设置对象
    wkWebConfig.preferences = preference;
    
    //WKWebViewConfiguration *config = [WKWebViewConfiguration new];
    self.detailIntroduceWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, self.supplierView.maxY, kScreenWidth, kScreenHeight - self.supplierView.maxY) configuration:wkWebConfig];
    self.detailIntroduceWebView.scrollView.bounces = NO ;
    //self.detailIntroduceWebView.scrollView.scrollEnabled = NO ;
    self.detailIntroduceWebView.navigationDelegate = self ;
    self.detailIntroduceWebView.UIDelegate = self ;
    self.detailIntroduceWebView.multipleTouchEnabled = YES;
    
    
    [self.mainScrollView addSubview:self.detailIntroduceWebView];

到这里就结束了。记录学习和工作中的点滴，让不明白的地方越来越少。

吐槽：实习生活太苦逼。求推荐工作🌟 😂

最后编辑于：2020.07.06 14:10:57