如何使用 Swift 制作具有 iPhone X 安全区域约束的 Webkit webView？

Posted 2023-02-23

【中文标题】如何使用 Swift 制作具有 iPhone X 安全区域约束的 Webkit webView？

【英文标题】：How to make Webkit webView with Swift with safe area constraints for iPhone X?

【发布时间】：2017-12-06 11:42:45

【问题描述】：

This is the configuration of the storyboard: see the image

*看上面的图片链接，支持ios9到iOS11

以下是工作代码解决方案：

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate, UIApplicationDelegate, WKNavigationDelegate   

    @IBOutlet weak var webViewContainer: UIView!

    let requestURLString = "http://google.com/“

    var webView: WKWebView!

    override func viewDidLoad()         

        super.viewDidLoad()
        let webConfiguration = WKWebViewConfiguration()

        let customFrame = CGRect.init(origin: CGPoint.zero, size: CGSize.init(width: 0.0, height: self.webViewContainer.frame.size.height))
        self.webView = WKWebView (frame: customFrame , configuration: webConfiguration)
        webView.translatesAutoresizingMaskIntoConstraints = false
        self.webViewContainer.addSubview(webView)
        webView.topAnchor.constraint(equalTo: webViewContainer.topAnchor).isActive = true
        webView.rightAnchor.constraint(equalTo: webViewContainer.rightAnchor).isActive = true
        webView.leftAnchor.constraint(equalTo: webViewContainer.leftAnchor).isActive = true
        webView.bottomAnchor.constraint(equalTo: webViewContainer.bottomAnchor).isActive = true
        webView.heightAnchor.constraint(equalTo: webViewContainer.heightAnchor).isActive = true  

        webView.uiDelegate = self
        webView.navigationDelegate = self
        webView.scrollView.bounces = false  
        self.openUrl()
    

    func openUrl() 
        let url = URL (string: requestURLString)
        let request = URLRequest(url: url!)
        webView.load(request)

    

我正在分享包含此项目的链接： https://github.com/kiril6/iPhoneX-webkitWebView

来源：http://delovski.net/webkitwebview/

【问题讨论】：

只需拖放您的 webKit 并添加约束 0,0,0,0 作为顶部、前导、尾随和底部。它可以在 iPhone X 上运行

是的，但问题是我支持 iOS 9 及更高版本，无法在情节提要中添加 webkit web 视图 - 给出错误，但可能仅适用于 11 及更高版本

【参考方案1】：

class ViewController:UIViewController,WKNavigationDelegate,WKUIDelegate 

@IBOutlet weak var webViewContainer: UIView!
fileprivate var requestURLString: URL?
var webView: WKWebView!

override func viewDidLoad() 
    super.viewDidLoad()
    loadUrl()


override func didReceiveMemoryWarning() 
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.


func loadUrl() 
    requestURLString = URL(string: "https://www.apple.com/in/")!
    guard let url = requestURLString else  return 

    webView = WKWebView()
    webView.navigationDelegate = self
    webView.allowsLinkPreview = true
    webView.uiDelegate = self

    webViewContainer.addSubview(webView)
    webViewContainer.sendSubview(toBack: webView)
    addConstraints(to: webView, with: webViewContainer)
    webView.load(NSURLRequest(url: url) as URLRequest)


func addConstraints(to webView: UIView, with superView: UIView) 
    webView.translatesAutoresizingMaskIntoConstraints = false
    let leadingConstraint = NSLayoutConstraint(item: webView, attribute: .leading, relatedBy: .equal, toItem: superView, attribute: .leading, multiplier: 1, constant: 0)
    let trailingConstraint = NSLayoutConstraint(item: webView, attribute: .trailing, relatedBy: .equal, toItem: superView, attribute: .trailing, multiplier: 1, constant: 0)
    let topConstraint = NSLayoutConstraint(item: webView, attribute: .top, relatedBy: .equal, toItem: superView, attribute: .top, multiplier: 1, constant: 0)
    let bottomConstraint = NSLayoutConstraint(item: webView, attribute: .bottom, relatedBy: .equal, toItem: superView, attribute: .bottom, multiplier: 1, constant: 0)
    superView.addConstraints([leadingConstraint, trailingConstraint, topConstraint, bottomConstraint])

希望这对您有用，请检查。另外，我正在分享包含在 Swift 4.0 中使用 WKWebView 加载 URL 的项目的链接：https://github.com/ipran/WebViewTestApp

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

感谢@Vincent 的评论，我已经编辑了答案以包含代码 sn-p。