WKWebView 內容高度的小技巧

今天獲取WKWebView的高度的時候，一直不能正確的獲取到javascript

不太正確的方法

完善網頁內容

這裏補充成一個完整的網頁html

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，把圖片按照手機屏幕的比例加載java

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 來獲取高度這裏有個問題，這裏獲取到的高度，時而準確，時而不許確，web

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)
複製代碼

在bash

self.webView.evaluateJavaScript(js, completionHandler: {(_,_){
  // 這裏也不能正取獲取到高度，
}})
複製代碼

好奇，這是爲何呢猜測，是由於這種方式，是已經加載完內容了而後執行了js的方法讓圖片尺寸發生了改變，可是爲何markdown

self.webView.scrollView.rx.observe(CGSize.self, "contentSize")
複製代碼

這裏檢測的高度是錯誤的呢？但願有人告訴我ide

解決方法

在完善網頁的時候，直接把JS嵌入進去，這樣不會在加載完網頁的時候再去執行JS，和上一個的對比：上一個加載網頁 - 完成 - js 這個加載網頁就能夠了ui

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> """
複製代碼

這樣好使了。lua