iOS 加载本地HTML适配的问题(完美解决)

2019-10-25  本文已影响0人  AmumuHandsome

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代码后

如有问题请留言哦~~

上一篇下一篇

猜你喜欢

热点阅读