我的业务场景：商品详情页面，顶部的商品价格描述的部分是native开发，下面的所有的商品详情图片，是html标签，客户端在展示的时候，我们是把整个页面用scrollView做滑动效果，上面放一个WKWebView加载html标签
把WKWebView的滚动关闭self.webview.scrollView.scrollEnabled = NO;让整个页面只有scrollView带动滚动。
实现要点：实时计算WKWebView的contentSize，设置为WKWebView的frame大小，并改变scrollView的contentSize
这里提供一个demo参考：点击查看Demo
- 方法一
直接在didFinishNavigation设置一次frame，这样的话必须等到webview加载完成之后，可能会有卡顿，如果html内容少可以这么用； - 方法二
利用KVO获取webview的contentSize变化来设置frame，这样能实时设置；
看代码
// 创建webview
- (void)viewDidLoad {
[super viewDidLoad];
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;
self.webview = [[WKWebView alloc]initWithFrame:CGRectMake(0, MaxY(titleBgView), SCREEN_WIDTH, SCREEN_HEIGHT-BottomBarHeight-SafeAreaTopHeight-(ScaleHeight(296)+103+52)) configuration:wkWebConfig];
self.webview.userInteractionEnabled = NO;
self.webview.scrollView.scrollEnabled = NO;
self.webview.UIDelegate = self;
self.webview.navigationDelegate =self;
NSURL *baseUrl = [NSURL URLWithString:@""];
[self.webview loadHTMLString:@"" baseURL:baseUrl];
[self.scrollview addSubview:self.webview];
self.webview.backgroundColor = [UIColor whiteColor];
// 添加kvo监听webview的scrollView.contentSize变化
[self.webview addObserver:self forKeyPath:@"scrollView.contentSize" options:NSKeyValueObservingOptionNew context:nil];
}
#pragma mark 获取webView的高度
// 加载成功之后计算高度
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{
// 计算WKWebView高度
[webView evaluateJavaScript:@"document.body.offsetHeight" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
CGRect frame =webView.frame;
frame.size.height =[result doubleValue];
webView.frame = frame;
self.scrollview.contentSize = CGSizeMake(SCREEN_WIDTH, ScaleHeight(296)+frame.size.height);
}];
}
// 使用kvo监听到的contensize变化，之所以在这里设置，因为webview加载的内容多的时候 是一段一段加载初开的，所以webview的contensize是实时变化的，所以在这里监听到可以以达到实时改变，不至于页面卡顿
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context {
if (object == self.webview && [keyPath isEqual:@"scrollView.contentSize"]) {
UIScrollView *scrollView = self.webview.scrollView;
CGSize size = CGSizeMake(SCREEN_WIDTH, scrollView.contentSize.height);
self.webview.frame = CGRectMake(0, MaxY(self.midView)+7+40, SCREEN_WIDTH, size.height);
self.scrollview.contentSize = CGSizeMake(SCREEN_WIDTH, ScaleHeight(296)+size.height);
}
}
