WKWebView在长按选择文本时奇怪的滚动行为(如果设置了内容插图)

Question

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

[截图]

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

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

下面是可用于重现问题的最小代码。我在iPhone 8 iOS 12.2上使用Xcode 10.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
}

我遇到了同样的问题，上面的代码对我来说工作正常。希望对您有所帮助。@Chui

Answer 2

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

我最想回到UIWebView，它应该可以解决你所有的问题