滚动视图中的WKWebView

Question

考虑到 Web View 之后必须有其他元素，如何将 WKWebView 放入滚动视图中。

. View
... Scroll View
....... ImageView
....... WKWebView
....... Button

• 问题1：禁用WKWebView的滚动
• 问题2：设置WKWebView的完整内容高度

检查我的示例项目

Answer 1

如果您想获取

WKWebView

中 html 的内容高度，使其在

UIScrollView

内不可滚动，请继续阅读。

您需要观察（通过委托）您的 webView 的内容高度。我给你这些步骤，因为你很清楚自己在做什么，而且你已经快成功了。

从 webView 高度限制中创建一个出口

@IBOutlet weak var constraint_WebViewHeight: NSLayoutConstraint!

订阅webView的委托

这会让您知道（当您的 webView 完成加载网站内容时您的控制器。

self.webView.navigationDelegate = self

符合协议

在

didFinish navigation

的

WKNavigationDelegate

方法中，然后调整 webView 高度约束的常量。如果你愿意的话可以放一些动画:)

extension ViewController: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
            self.constraint_WebViewHeight.constant = webView.scrollView.contentSize.height
        }
    }
}

最后，解决你的限制。

a.删除 imageView 底部约束。 b.将底部约束添加到滚动视图的保存按钮。

这将使你的scrollView可滚动。

瞧！这会产生这个结果。

我希望这有帮助！

Answer 2

根据您的理解，如果页面比屏幕大，您希望 webview 不能很好地滚动，那么它会向右滚动吗？ 显示完整页面。尽管您可以从界面生成器或使用滚动视图对象的代码将 isscrollingenabled 更改为 false。 要设置完整高度，请从四面八方给出约束 0,0,0,0，它肯定会拉伸到整个屏幕

Answer 3

与 Glenn 的答案相同的方法 - 它仍然手动调整

WKWebView

上的高度限制 - 但这种方法避免了

DispatchQueue.main.asyncAfter()

。我想避免它，因为如果

DispatchQueue.main.async()

不起作用，而且它也不起作用，那么你将等待不确定的时间 - 不好。

    fileprivate var webviewHeightConstraint: NSLayoutConstraint?
    fileprivate var observer: NSKeyValueObservation?
    fileprivate weak var webview: WKWebView?

    override func viewDidLoad() {
      super.viewDidLoad()
      // set self.webview to your webview
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        self.startObservingContentSize(webview: self.webview)
    }

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        self.stopObservingContentSize()
    }

    // song & dance to get WKWebview in a UIScrollView
    private var _lastContentSize: CGSize?
    fileprivate func startObservingContentSize(webview: WKWebView) {
        let handler = { [weak webview, weak self] (scrollview: UIScrollView, change: NSKeyValueObservedChange<CGSize>) in
            if let self = self, let webview = webview, let contentSize = change.newValue {
                if self._lastContentSize?.height == contentSize.height { return }
                self._lastContentSize = contentSize
                self.webviewHeightConstraint?.isActive = false
                self.webviewHeightConstraint = webview.heightAnchor.constraint(equalToConstant: contentSize.height)
                self.webviewHeightConstraint?.isActive = true
                self.contentView?.setNeedsLayout()
            }
        }
        self.observer = webview.scrollView.observe(\UIScrollView.contentSize, options: [NSKeyValueObservingOptions.new], changeHandler: handler)
    }

    fileprivate func stopObservingContentSize() {
        self.observer?.invalidate()
        self.observer = nil
    }

Answer 4

这是错误的做法。 你应该使用WKWebView的scrollView。

您需要使用 javascript 为带有 html 边距的图像和按钮预留空间

[NSString stringWithFormat:@"document.body.style.margin = '%dpx %dpx %dpx %dpx'", (int)margins.top, (int)margins.right, (int)margins.bottom, (int)margins.left]

或者直接在 html body 中（如果您能够访问它）。

在WKWebView的scrollView中添加imageview和button。