Question

我遇到一个问题，长按并在WKWebView上选择文本会随机滚动Web视图。当我设置Web视图的滚动视图的contentInset.top属性时，就会发生此行为。

[屏幕截图]

长按文本。绿色区域是本机UIView https://ibb.co/P4LqgBB
拖动文本后，WKWebView意外地向下滚动https://ibb.co/r5KR4JB

由于我的应用程序需要在Web视图部分上方显示本机视图，因此当用户需要从Web视图中复制和粘贴文本时，这种行为确实使用户感到沮丧。

下面是可用于重现此问题的最小代码。我在使用Xcode 10.2的iPhone 8 iOS 12.2上尝试了此操作。设置webView.scrollView.contentInset.top = 100时会发生此问题。此外，如果将值更改为1000之类的值，其中contentInset.top的长度大于电话的屏幕尺寸，那么长按将使Web视图立即滚动。

 override func viewDidLoad() {
        super.viewDidLoad()

        // Create WKWebView
        let webView = WKWebView(frame: .zero)
        webView.translatesAutoresizingMaskIntoConstraints = false
        webView.scrollView.contentInsetAdjustmentBehavior = .never
        webView.clipsToBounds = false
        webView.scrollView.bounces = false

        // Create Native UIView
        let nativeView = UIView(frame: .zero)
        nativeView.translatesAutoresizingMaskIntoConstraints = false
        nativeView.backgroundColor = .green

        // Add WebView to the view
        view.addSubview(webView)

        webView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        webView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        webView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        webView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

        // Set contentInset to give blank space for native view
        webView.scrollView.contentInset.top = 100

        // Add the native view as webView scrollView's child
        webView.scrollView.addSubview(nativeView)
        nativeView.leadingAnchor.constraint(equalTo: webView.leadingAnchor).isActive = true
        nativeView.trailingAnchor.constraint(equalTo: webView.trailingAnchor).isActive = true
        nativeView.topAnchor.constraint(equalTo: webView.scrollView.topAnchor,
                                        constant: -100).isActive = true
        nativeView.heightAnchor.constraint(equalToConstant: 100).isActive = true

        // Load the webpage
        let url = URL(string: "https://www.apple.com")!
        let request = URLRequest(url: url)
        webView.load(request)
    }

我希望长按和滚动的行为就像未设置contentInset.top时一样。

有人知道如何解决此问题吗？

Answer 1

请在视图控制器中添加第一个UIScrollViewDelegate，WKNavigationDelegate，WKUIDelegate委托，并在下面添加委托。

//标记：-WKWebView委托

private func webView(webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: NSError) {
    print(error.localizedDescription)
}

func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
  //  print("Strat to load")
}

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
   // print("finish to load")
    let javascriptStyle = "var css = '*{-webkit-touch-callout:none;-webkit-user-select:none}'; var head = document.head || document.getElementsByTagName('head')[0]; var style = document.createElement('style'); style.type = 'text/css'; style.appendChild(document.createTextNode(css)); head.appendChild(style);"
    webView.evaluateJavaScript(javascriptStyle, completionHandler: nil)
}

// MARK: - UIScrollViewDelegate

func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
    return nil
}

我也遇到过同样的问题，上面的代码对我来说很好用。希望对您有帮助。 @崔

Answer 2

如果CSS做得不够干净，WKWebView会产生很多问题。

我建议回到UIWebView，它应该可以解决所有问题

如果设置了contentInset，则长按以选择文本时，WKWebView会产生奇怪的滚动行为

2 个答案: