WKWebView底部约束设置，但不起作用 [英] WKWebView bottom constraint set but doesn't work

问题描述

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

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

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

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

  let wv = WKWebView(frame:containerView.frame，配置:wvConfig)webView = wvcontainerView.addSubview(wv)//设置约束wv.translatesAutoresizingMaskIntoConstraints = false如果#available(iOS 11.0，*){wv.trailingAnchor.constraint(equalTo:containerView.trailingAnchor).isActive = truewv.leadingAnchor.constraint(equalTo:containerView.leadingAnchor).isActive = truewv.topAnchor.constraint(equalTo:containerView.topAnchor).isActive = truewv.bottomAnchor.constraint(equalTo:containerView.bottomAnchor).isActive = true} 别的 {NSLayoutConstraint(项目:wv，属性:.top，relatedBy:.equal，toItem:containerView，属性:.top，乘数:1.0，常数:0).isActive = trueNSLayoutConstraint(项目:wv，属性:.lead，relatedBy:.equal，toItem:containerView，属性:.lead，乘数:1.0，常数:0).isActive = trueNSLayoutConstraint(项目:wv，属性:.trailing，relatedBy:.equal，toItem:containerView，属性:.trailing，乘数:1.0，常数:0).isActive = trueNSLayoutConstraint(项目:wv，属性:.bottom，relatedBy:.equal，toItem:containerView，属性:.bottom，乘数:1.0，常数:0).isActive = true} 

那么，任何人都可以在这里纠正此问题吗?

某些特定的URL可行，但并非全部可行.为什么?

解决方案

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

  class FullScreenWKWebView:WKWebView {覆盖var safeAreaInsets:UIEdgeInsets {如果#available(iOS 11.0，*){让昆虫= super.safeAreaInsets返回UIEdgeInsets(顶部:昆虫.顶部，左侧:昆虫.左侧，底部:0，右侧:昆虫.右侧)} 别的 {返回零}}覆盖var alignmentRectInsets:UIEdgeInsets {让昆虫= super.alignmentRectInsets返回UIEdgeInsets(顶部:昆虫.顶部20，左侧:昆虫.左侧，底部:0，右侧:昆虫.右侧)}} 

以上内容摘录自

2. iOS版本< 11

I have set the WKWebView bottom constraint to super view but it won't display till super view instead displays content till safe area.

Here is the problem image that displays the bottom part doesn't fill properly.

And here is the hierarchy of view and constraints image

And code to setup WebView constraints with the container view

    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
    } 

So, Can anyone rectify the issue here?

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

解决方案

The following subclassed WKWebView might solve your problem:

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)
    }
}

The above snipped taken from

Full Code:

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()
    }
}

output: 1. iOS version > 10

2. iOS version <11

这篇关于WKWebView底部约束设置，但不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！