如何向 wkWebView 添加按钮？

Question

因为我们将 wkWebView 作为根视图，所以我在布局中添加的按钮没有出现在屏幕上。然后我尝试添加 wkWebView 作为根视图的子视图，但应用程序崩溃了。然后我找到了UIBarButtonItem，但是好像只能创建2个按钮。

我需要在屏幕的任意位置添加 5 个按钮。有解决方法吗？我是 ios 开发的新手，我不太擅长使用界面生成器。

在尝试@Matic Oblak 的代码并将其放在 loadView() 上我进行 wkwebview 初始化后，我收到一条错误消息“警告：尝试在 WebViewController 上呈现 SomeViewController，其视图是不在 window 层级中！

这是我当前的代码。

override func loadView() {
//        let contentController: WKUserContentController = WKUserContentController()
//        let config: WKWebViewConfiguration = WKWebViewConfiguration()
//
//        contentController.add(self, name: "callbackHandler")
//        config.userContentController = contentController
//
//        webView = WKWebView(
//            frame: UIScreen.main.bounds,
//            configuration: config
//        )

       //webView.navigationDelegate = self
       //webView.translatesAutoresizingMaskIntoConstraints = false
       //webView.scrollView.isScrollEnabled = false

       //view = webView

       if let webViewContainer = webviewContainer {

           // Initialize:
           let contentController: WKUserContentController = WKUserContentController()
           let config: WKWebViewConfiguration = WKWebViewConfiguration()

           contentController.add(self, name: "callbackHandler")
           config.userContentController = contentController

           let webView = WKWebView(frame: webViewContainer.bounds, configuration: WKWebViewConfiguration()) // Create a new web view
           webView.translatesAutoresizingMaskIntoConstraints = false // This needs to be called due to manually adding constraints

           webView.navigationDelegate = self
           webView.translatesAutoresizingMaskIntoConstraints = false
           webView.scrollView.isScrollEnabled = false

           // Add as a subview:
           webViewContainer.addSubview(webView)

           // Add constraints to be the same as webViewContainer
           webViewContainer.addConstraint(NSLayoutConstraint(item: webView, attribute: .leading, relatedBy: .equal, toItem: webViewContainer, attribute: .leading, multiplier: 1.0, constant: 0.0))
           webViewContainer.addConstraint(NSLayoutConstraint(item: webView, attribute: .trailing, relatedBy: .equal, toItem: webViewContainer, attribute: .trailing, multiplier: 1.0, constant: 0.0))
           webViewContainer.addConstraint(NSLayoutConstraint(item: webView, attribute: .top, relatedBy: .equal, toItem: webViewContainer, attribute: .top, multiplier: 1.0, constant: 0.0))
           webViewContainer.addConstraint(NSLayoutConstraint(item: webView, attribute: .bottom, relatedBy: .equal, toItem: webViewContainer, attribute: .bottom, multiplier: 1.0, constant: 0.0))

           // Assign web view for reference
           self.webView = webView
       }
   }

override func viewDidLoad() {
    if(someVar1.isEmpty && someVar2.isEmpty){
           showSomeDialog()
       }
}

loadView() 上第一个注释行是我以前的代码供参考。

将@Matic Oblak 的代码放在 viewDidLoad() 上后，出现黑屏。此外，将调用 SomeViewController 的代码放在 viewDidAppear() 上后，错误消失了，但我仍然遇到黑屏。

Answer 1

您可以使用某些第三方库在 viewcontroller 顶部添加浮动按钮。假设使用 Floaty 或任何其他类似的。

Answer 2

实际上 WKWebView 有一点讨厌的错误，当添加到故事板中时它会崩溃。但是您可以在代码中做到这一点。我通常做的是在故事板中创建一个视图，就像一个 Web 视图面板（通常是全屏，但如果你有一些工具栏则不是），然后添加一个新的 Web 视图作为子视图。我仍然使用约束来添加 web 视图：

import UIKit
import WebKit

class WebViewController: UIViewController {

    @IBOutlet private var webViewContainer: UIView? // A view on which a web view will be added to
    private var webView: WKWebView? // Web view manually added

    override func viewDidLoad() {
        super.viewDidLoad()

        if let webViewContainer = webViewContainer {

            // Initialize:
            let webView = WKWebView(frame: webViewContainer.bounds, configuration: WKWebViewConfiguration()) // Create a new web view
            webView.translatesAutoresizingMaskIntoConstraints = false // This needs to be called due to manually adding constraints

            // Add as a subview:
            webViewContainer.addSubview(webView)

            // Add constraints to be the same as webViewContainer
            webViewContainer.addConstraint(NSLayoutConstraint(item: webView, attribute: .leading, relatedBy: .equal, toItem: webViewContainer, attribute: .leading, multiplier: 1.0, constant: 0.0))
            webViewContainer.addConstraint(NSLayoutConstraint(item: webView, attribute: .trailing, relatedBy: .equal, toItem: webViewContainer, attribute: .trailing, multiplier: 1.0, constant: 0.0))
            webViewContainer.addConstraint(NSLayoutConstraint(item: webView, attribute: .top, relatedBy: .equal, toItem: webViewContainer, attribute: .top, multiplier: 1.0, constant: 0.0))
            webViewContainer.addConstraint(NSLayoutConstraint(item: webView, attribute: .bottom, relatedBy: .equal, toItem: webViewContainer, attribute: .bottom, multiplier: 1.0, constant: 0.0))

            // Assign web view for reference
            self.webView = webView
        }
    }

}

所以这里 webViewContainer 是从情节提要中拖出的任何您想要的视图。如果你愿意，它甚至可以是视图控制器的主视图。

剩下的在评论里说明。

因此使用此过程您不需要 "hack" 在所有内容之上添加子视图。您可以在情节提要中正常添加按钮。

注意：使用 webViewContainer 作为主视图的问题是 Web 视图将比其他视图添加得晚，因此它可能会覆盖您在情节提要中添加的视图。您需要将 Web 视图发送到后面或将叠加项置于前面。它只是添加 webViewContainer.sendSubviewToBack(webView)，但我仍然更喜欢为 Web 视图使用单独的视图。

如何向 wkWebView 添加按钮？

How to add buttons to wkWebView?

ios8

swift3

xcode10