WKWebview加载富文本(本地HMTL)可能会出现一些布局问题,图片大小不对、位置不对、字体大小不对等等,这主要是HMTL没有传入样式,所以需要我们在加载webview的时候注入一段JS代码。这样就能完美解决布局错乱问题。
直接上代码:
NSString *jScript =
@"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content','width=device-width,initial-scale=1.0');document.getElementsByTagName('head')[0].appendChild(meta);var imgs = document.getElementsByTagName('img');for (var i in imgs){imgs[i].setAttribute('width', '100%');imgs[i].style.height='auto';}";
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;
_webView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:wkWebConfig];
[_webView loadHTMLString:htmlStr baseURL:nil];
对比如下:
未注入JS代码前 注入JS代码后
如有问题请留言哦~~
网友评论