关于ios:WKWebView底部约束设置但不起作用

WKWebView bottom constraint set but won't work

我已经将WKWebView底部约束设置为超级视图,但是直到超级视图才显示内容,直到安全区域为止。

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

enter image description here

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

enter image description here

enter image description here

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    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 it works, but not for all. Why?


以下子类的WKWebView可以解决您的问题:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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)
    }
}

以上摘录自

完整代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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
enter image description here

  • iOS版本<11 enter image description here

  • 我正在尝试重现相同的问题,使用了您的方法,但是没有遇到有关底部空间的任何问题。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    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
        }
    }
    }

    View Hierarchy
    Constraints

    一切对我来说都很好。

    输出-

    Output

    如果我缺少什么,请告诉我。

    更新-

    问题在于WKWebview的scrollView。

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

    为了避免这种使用

    1
    wv.scrollView.contentInsetAdjustmentBehavior = .never

    最终输出-

    enter image description here


    根据给定的屏幕截图,将底部约束应用到安全区域中。将底部约束添加到SuperView中。 enter image description here


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

    如果您使用情节提要板,则Xcode可能会对安全区域设置约束。在这种情况下,您应该以编程方式处理所有约束。


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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     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