WKWebView 内容高度的小技巧

时间 2019-11-07

标签 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的方法让图片尺寸发生了改变，可是为何ide

self.webView.scrollView.rx.observe(CGSize.self, "contentSize")
复制代码

这里检测的高度是错误的呢？但愿有人告诉我ui

解决方法

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

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> """
复制代码

这样好使了。spa