WKWebView 底部约束集但不起作用

Question

我已将 WKWebView 底部约束设置为超级视图，但它不会显示直到超级视图，而是显示内容直到安全区域。

这是显示底部未正确填充的问题图像。

这是视图和约束图像的层次结构

以及使用容器视图设置 WebView 约束的代码

    let wv = WKWebView(frame: containerView.frame, configuration: wvConfig)
    webView = wv
    containerView.addSubview(wv)
    
    // setup constraints
    wv.translatesAutoresizingMaskIntoConstraints = false
    if #available(iOS 11.0, *) {
        wv.trailingAnchor.constraint(equalTo: containerView.trailingAnchor).isActive = true
        wv.leadingAnchor.constraint(equalTo: containerView.leadingAnchor).isActive = true
        wv.topAnchor.constraint(equalTo: containerView.topAnchor).isActive = true
        wv.bottomAnchor.constraint(equalTo: containerView.bottomAnchor).isActive = true
    } else {
        NSLayoutConstraint(item: wv, attribute: .top, relatedBy: .equal, toItem: containerView, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: wv, attribute: .leading, relatedBy: .equal, toItem: containerView, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: wv, attribute: .trailing, relatedBy: .equal, toItem: containerView, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: wv, attribute: .bottom, relatedBy: .equal, toItem: containerView, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true
    }

所以，有人可以解决这里的问题吗？

Some certain URL's works, but not for all. Why?

Answer 1

将容器视图替换为底部约束中的视图，因为根是视图。

 view.addSubview(wv)

  wv.translatesAutoresizingMaskIntoConstraints = false
    if #available(iOS 11.0, *) {
        wv.trailingAnchor.constraint(equalTo: containerView.trailingAnchor).isActive = true
        wv.leadingAnchor.constraint(equalTo: containerView.leadingAnchor).isActive = true
        wv.topAnchor.constraint(equalTo: containerView.topAnchor).isActive = true
        wv.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    }
    NSLayoutConstraint(item: wv, attribute: .top, relatedBy: .equal, toItem: containerView, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: wv, attribute: .leading, relatedBy: .equal, toItem: containerView, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: wv, attribute: .trailing, relatedBy: .equal, toItem: containerView, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: wv, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true

Answer 2

您的代码看起来不错，您的问题可能来自 containerView 约束。

如果您使用故事板，Xcode 可能在安全区域设置限制。在那种情况下，您应该以编程方式处理所有约束。

Answer 3

根据给定的屏幕截图，底部约束已应用于 SuperView 的安全 area.Add 底部约束。

Answer 4

我正在尝试重现同样的问题，使用了您的方法，但没有遇到任何关于底部的问题 space。

class TestWebViewController: UIViewController{

@IBOutlet weak var containerView: UIView!

var wkWebView : WKWebView?

override func viewDidLoad() {
    super.viewDidLoad()
    addWKWebView()

    wkWebView?.load(URLRequest(url: URL(string: "https://www.google.com")!))
    wkWebView?.allowsBackForwardNavigationGestures = true

    // Do any additional setup after loading the view.
}

func addWKWebView() {
    let wvConfig = WKWebViewConfiguration.init()
    let wv = WKWebView(frame: containerView.frame, configuration: wvConfig)
    wkWebView = wv
    containerView.addSubview(wv)
    // setup constraints
    wv.translatesAutoresizingMaskIntoConstraints = false
    if #available(iOS 11.0, *) {
        wv.trailingAnchor.constraint(equalTo: containerView.trailingAnchor).isActive = true
        wv.leadingAnchor.constraint(equalTo: containerView.leadingAnchor).isActive = true
        wv.topAnchor.constraint(equalTo: containerView.topAnchor).isActive = true
        wv.bottomAnchor.constraint(equalTo: containerView.bottomAnchor).isActive = true
    } else {
        NSLayoutConstraint(item: wv, attribute: .top, relatedBy: .equal, toItem: containerView, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: wv, attribute: .leading, relatedBy: .equal, toItem: containerView, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: wv, attribute: .trailing, relatedBy: .equal, toItem: containerView, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: wv, attribute: .bottom, relatedBy: .equal, toItem: containerView, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true
    }
}
}

我一切正常。

输出 -

如果我遗漏了什么，请告诉我。

更新 -

问题出在 WKWebview 的滚动视图上。

在安全区WKScrollView.adjustedContentInset设置为{0,0,34,0}。

避免这种使用

wv.scrollView.contentInsetAdjustmentBehavior = .never

最终输出-

Answer 5

以下子类 WKWebView 可能会解决您的问题：

class FullScreenWKWebView: WKWebView {

    override var safeAreaInsets: UIEdgeInsets {
        if #available(iOS 11.0, *) {
            let insects = super.safeAreaInsets
            return UIEdgeInsets(top: insects.top, left: insects.left, bottom: 0, right: insects.right)
        } else {
            return .zero
        }

    }
    override var alignmentRectInsets: UIEdgeInsets{
        let insects = super.alignmentRectInsets
        return UIEdgeInsets(top: insects.top-20, left: insects.left, bottom: 0, right: insects.right)
    }
}

以上截图已截取

完整代码：

import UIKit
import WebKit
class FullScreenWKWebView: WKWebView {

    override var safeAreaInsets: UIEdgeInsets {
        if #available(iOS 11.0, *) {
            let insects = super.safeAreaInsets
            return UIEdgeInsets(top: insects.top, left: insects.left, bottom: 0, right: insects.right)
        } else {
            return .zero
        }

    }
    override var alignmentRectInsets: UIEdgeInsets{
        let insects = super.alignmentRectInsets
        return UIEdgeInsets(top: insects.top-20, left: insects.left, bottom: 0, right: insects.right)
    }
}
class ViewController: UIViewController {

    let contaienrView: UIView = {
        let v = UIView()
        v.translatesAutoresizingMaskIntoConstraints = false
        return v
    }()

    let webView: FullScreenWKWebView = {
        let v = FullScreenWKWebView()
        v.translatesAutoresizingMaskIntoConstraints = false
        return v
    }()

    func setupViews(){
        view.addSubview(contaienrView)
        contaienrView.addSubview(webView)
        let constrains = [
            contaienrView.topAnchor.constraint(equalTo: view.topAnchor),
            contaienrView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            contaienrView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            contaienrView.trailingAnchor.constraint(equalTo: view.trailingAnchor),

            webView.topAnchor.constraint(equalTo: contaienrView.topAnchor),
            webView.leadingAnchor.constraint(equalTo: contaienrView.leadingAnchor),
            webView.bottomAnchor.constraint(equalTo: contaienrView.bottomAnchor),
            webView.trailingAnchor.constraint(equalTo: contaienrView.trailingAnchor),
            ]
        NSLayoutConstraint.activate(constrains)
    }

    func loadRequest(){
        let url = URL(string: "https://afghan-gps.com/mobile")!
        let request = URLRequest(url: url)
        webView.load(request)
    }


    override func viewDidLoad() {
        super.viewDidLoad()
        setupViews()
        loadRequest()
    }
}

输出：1。iOS版本 > 10

iOS 版本 <11

WKWebView 底部约束集但不起作用

WKWebView bottom constraint set but doesn't work

ios

swift

wkwebview