如何向wkWebView添加按钮?

时间:2018-10-18 03:59:23

标签: swift3 ios8 xcode10

由于我们以wkWebView作为根视图,因此我在布局中添加的按钮不会显示在屏幕上。然后,我尝试将wkWebView添加为根视图的子视图,但是应用程序崩溃了。然后我发现了UIBarButtonItem,但似乎您只能创建2个按钮。

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

尝试@Matic Oblak的代码并将其放在进行loadView()初始化的wkwebview上后,我收到一条错误消息:“警告:尝试在视图不在的WebViewController上显示SomeViewController窗口层次!

这是我当前的代码。

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()上之后,错误消失了,但我仍然出现黑屏。

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

实际上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从情节提要中拖动为所需的任何视图。如果需要,它甚至可以成为视图控制器的主视图。

其余内容应在评论中说明。

因此,使用此过程,您无需对所有内容之上的子视图进行“修改”。您可以将按钮正常添加到情节提要中。

注意::将webViewContainer用作主视图的问题在于,Web视图的添加时间会比其余视图晚,因此它可以覆盖您在情节提要中添加的视图。您需要将Web视图发送回去,或者将叠加项放在最前面。它只是添加webViewContainer.sendSubviewToBack(webView),但我仍然更喜欢仅将单独的视图用于Web视图。