這是一個很好的問題,裝修Web視圖其內容有有趣的應用程序,如使用顯示在地圖上的信息窗口適合其內容的網頁視圖。
這是一個使用WKWebView
的解決方案,首先創建一個1×1px大小的Web視圖,加載其內容並查詢Web視圖以在相應更新Web視圖框架大小之前查找其內容大小。有點哈克,但似乎是唯一的方法。
import WebKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let webView = WKWebView(frame: CGRect(x: 0, y: 0, width: 1, height: 1))
view.addSubview(webView)
webView.navigationDelegate = self
let htmlFile = Bundle.main.path(forResource: "index", ofType: "html")
let html = try! String(contentsOfFile: htmlFile!, encoding: String.Encoding.utf8)
webView.loadHTMLString(html, baseURL: nil)
}
}
extension ViewController: WKNavigationDelegate {
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
var frame = webView.frame
webView.evaluateJavaScript("document.documentElement.offsetWidth", completionHandler: { ret, _ in
guard let width = ret as? CGFloat else { return }
print("setting width: ", width)
frame.size.width = width
webView.frame = frame
webView.evaluateJavaScript("document.documentElement.offsetHeight", completionHandler: { ret, _ in
guard let height = ret as? CGFloat else { return }
print("setting height: ", height)
frame.size.height = height
webView.frame = frame
})
})
}
}
我的樣本HTML文件(index.html
):
<html>
<head>
<meta name="viewport" content="width=150, initial-scale=1.0">
<style>
html, body { margin: 0; padding: 0 };
</style>
</head>
<body>
<div style="height:280px;width:150px;background-color:cyan;"></div>
</body>
</html>
注意:您應該嘗試,如果可以使用WKWebView
,而不是UIWebView
。一個UIWebView
解決方案可能是可能的,但我認爲這是值得的時間和精力,當WKWebView
應該更適合您的需求。