记录一下使用WKWebView加载HTMLString的问题

最新推荐文章于 2021-06-22 12:32:30 发布

Bricklayer9527

最新推荐文章于 2021-06-22 12:32:30 发布

阅读量3.4k

点赞数

分类专栏：工作笔记文章标签： WKWebView图片宽度 WKWebView高度 ios swift

本文链接：https://blog.csdn.net/u012399594/article/details/109274876

版权

工作笔记专栏收录该内容

12 篇文章 1 订阅

订阅专栏

一、需求描述

后台返回一段不完整的html字符串，如：<img src="http://img10.360buyimg.com/imgzone/jfs/t1/118262/18/19649/117409/5f7ed2bbE9f853a48/e327e1d745e0a57a.jpg">。（当然这只是其中的一小段）
需要使用WKWebView加载。
多张图片的宽度要跟屏幕宽一致。
要拿到WKWebView加载后的内容高度。

温馨提示：如果您需要实现的需求功能不是以上几点的，可以“alt+F4”了，江湖不远，有缘再会！

二、吐槽一下为什么写这篇文章？

因为本人被网上的转载博客坑了。转了N遍，代码格式都错了，问题是还有可能多了一个字符。比如，设置图片宽度的代码有这么一行$img[p].style.width = '100%';，转载的文章居然100后面有两个“%”，坑了我。
网上分享的相关文章，基本都是一小段代码，想快速地尝试一下代码是否达到效果都要花时间自己去写，然后尝试去验证。
今天星期天，996的我想记录一下自己遇到的问题。当然能帮助到有同样需求的人会更好。

三、完整代码

//
//  ViewController.swift
//  Demo1024
//
//  Created by lam on 2020/10/24.
//

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {
    
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .blue
        
        /** 这是后台返回的html字符串 */
        let contentString = """
                    <img src="http://img10.360buyimg.com/imgzone/jfs/t1/118262/18/19649/117409/5f7ed2bbE9f853a48/e327e1d745e0a57a.jpg">
                    """
        
        /** 
         拼接一下，拼成一个完整的html
         - 1、<meta> 标签中内容的作用是禁用缩放，可以更准确拿到webview的内容高度。
         - 2、“window.onload” 的作用的是遍历所有图片，统一设置图片宽度为webview的宽度。
         */
        let htmlString = """
                        <html>
                        <meta charset="utf-8">                         
                        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
                        <head>
                        <style type='text/css'>
                            body {
                                font-size: 15px;
                            }
                        </style>
                        </head>
                        <body>
                        <script type='text/javascript'>
                            window.onload = function () {
                                var $img = document.getElementsByTagName('img');
                                for (var p in $img) {
                                    $img[p].style.width = '100%';
                                    $img[p].style.height = 'auto';
                                }
                            }
                        </script>
                        <div>
                        \(contentString)
                        </div>
                        </body>
                        </html>
                        """
        
        /**
         初始化，并设置webView的相关属性
         - 1、设置frame高度，或设置约束高度，要尽可能的设置小一点。
         */
        webView = WKWebView.init(frame: CGRect(x: 0, y: 0, width: 414, height: 20))
        webView.backgroundColor = UIColor.white
        webView.scrollView.showsVerticalScrollIndicator = false
        webView.scrollView.bounces = false
        webView.isOpaque = false
        webView.navigationDelegate = self
        if #available(iOS 11.0, *) {
            /// 滚动视图顶部空白的问题
            webView.scrollView.contentInsetAdjustmentBehavior = .never
        }
        view.addSubview(webView)
        
        /** 加载 HTMLString */
        webView.loadHTMLString(htmlString, baseURL: nil)
    }
    
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        
        /**
         网页加载完成，获取内容的高度。
         - 1、想要拿到高度，webView的高度先要设置小一点，也可设置为0。
         假如，一开始设置了webView的高度为700，但是内容的高度没有达到700，
         此时获取到的高度肯定是700。所以要先设置小一点。
         
         - 2、以下代码，也可以放在KVO的监听方法里面，但是KVO可能会执行多次。
         didFinish这里只执行一次。具体放那里看个人需求了。
         */
        let jsScrollHeight = "document.body.scrollHeight"
        webView.evaluateJavaScript(jsScrollHeight, completionHandler: { (result, error) in
            if result == nil { return }                
            if result is CGFloat {
                /** 这里拿到的 result 就是高度 */
                let height = result as! CGFloat
                var rect = webView.frame
                rect.size.height = height
                webView.frame = rect
            }
        })        
    }
}