WKWebView 内容高度的小技巧这样好使了。

今天获取WKWebView的高度的时候，一直不能正确的获取到

不太正确的方法

完善网页内容

这里补充成一个完整的网页

 let html = "<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; 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\"></header><body>\(htmlStr!)<body></html>"

检测内容加载

这里检测加载进度，加载结束，执行JS，把图片按照手机屏幕的比例加载

self.webView.rx.observe(Double.self, "estimatedProgress").map { (progress) -> Bool? in
            if let progress = progress{
                if progress == 1.0{
                    let js = "function resizeImages() {" +
                        "    var myimg, oldwidth;" +
                        "    var maxwidth = document.body.clientWidth-18;" +
                        "    for (i = 0; i < document.images.length; i++) {" +
                        "        myimg = document.images[i];" +
                        "        if (myimg.width > maxwidth) {" +
                        "            oldwidth = myimg.width;" +
                        "            myimg.style.width = maxwidth;" +
                        "        }" +
                        "    }" +
                        "};" +
                    "resizeImages();"
                    self.webView.evaluateJavaScript(js, completionHandler: nil)
                }
                return progress > 0.0 && progress < 1.0
            }
            return nil
            }.distinctUntilChanged().subscribe(onNext: {[weak self] (loading) in
                if let loading = loading {
                    if loading {
                        self?.hudShow()
                    } else {
                        self?.hudHide()
                    }
                }
            }).disposed(by: disposeBag)

检测 WKWebView 的 contentSize 来获取高度这里有个问题，这里获取到的高度，时而准确，时而不准确，

 self.webView.scrollView.rx.observe(CGSize.self, "contentSize").map { (size) -> CGFloat? in
            if let size = size{
                return size.height
            }
            return nil
            }.subscribe(onNext: { [unowned self](height) in
                if let height = height{
                    print(height)
                    self.webContentHeight.constant = height > 400 ? height : 400
                }
            }).disposed(by: disposeBag)

在

self.webView.evaluateJavaScript(js, completionHandler: {(_,_){
  // 这里也不能正取获取到高度，
}})

好奇，这是为什么呢猜想，是因为这种方式，是已经加载完内容了然后执行了js的方法让图片尺寸发生了改变，但是为什么

self.webView.scrollView.rx.observe(CGSize.self, "contentSize")

这里检测的高度是错误的呢？希望有人告诉我

解决方法

在完善网页的时候，直接把JS嵌入进去，这样不会在加载完网页的时候再去执行JS，和上一个的对比：上一个加载网页 - 完成 - js 这个加载网页就可以了

let html = """
        <html>
        <head>
        <meta http-equiv=\"Content-Type\" content=\"text/html; 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\">
        </header>
        <body>
        <script type='text/javascript'>
        window.onload = function(){
            var $img = document.getElementsByTagName('img');
            for(var p in  $img){
                $img[p].style.width =  document.body.clientWidth-18;
                $img[p].style.height = 'auto'
            }
        }
        </script>
        \(content)<body>
        </html>
        """

这样好使了。