【问题标题】:Transparent background for WKWebViewWKWebView 的透明背景
【发布时间】:2014-09-01 11:03:39
【问题描述】:

在我的应用程序中,我希望 WKWebView 具有透明背景,因此后面的视图(ImageView)可以作为背景图片显示。

    webView!.opaque = false
    webView!.backgroundColor = UIColor.clearColor()

上面的代码在 UIWebView 上可以正常工作,但是如果 webView 是 WKWebView,则会显示白色背景。

还尝试在 CSS 中添加透明背景色。结果是一样的,只适用于 UIWebView 而不是 WKWebView。有什么建议吗?

【问题讨论】:

    标签: ios swift wkwebview


    【解决方案1】:

    还没有使用 WKWebView,但即使 UIWebView 曾经有这个问题,解决方案是将 html 内容包装在这样的东西中:

    <body style="background-color:transparent;"></body>
    

    希望对你有帮助。

    【讨论】:

    • 谢谢,试过了,还把 color: transparent;在css文件中,也不起作用。背景始终为白色。
    【解决方案2】:

    此错误似乎已在 Beta 5 中修复。

    【讨论】:

      【解决方案3】:

      下面的代码对我有用:

       [wkWebView setValue:YES forKey:@"drawsTransparentBackground"];
      

      【讨论】:

      • SetValue:YES 在 ARC 中是不允许的。 [NSNumber numberWithBool:YES] 应该使用。而且 WKWebView 也没有与键值编码兼容的 drawsTransparentBackground
      • @InnaKamoze 谢谢。您能否提供其他可行的解决方案?
      • 如果这些方法不起作用,则可能是 WKWebView 属性损坏或存在其他问题。无论如何,ARC不支持drawsTransparentBackground和setValue ForKey这样的方法
      • 谢谢,这对我有用。 SetValue as NSNumber 没问题。你的例子没问题!
      • 这会使 iOS 13.0 上的应用程序崩溃。
      【解决方案4】:

      此代码可能会对您有所帮助。为 Swift 3+ 更新

      self.webView = WKWebView()
      self.webView.isOpaque = false
      self.webView.backgroundColor = UIColor.clear
      self.webView.scrollView.backgroundColor = UIColor.clear
      

      【讨论】:

        【解决方案5】:

        我知道这是一个非常古老的问题。但我今天一直在为此苦苦挣扎。不知道是不是只有我一个人,但是webView.backgroundColor在WKWebView中是未定义的,webView.opaque是只读的。我解决此问题的唯一方法是将 Web 视图图层背景颜色设置为 CGColor clear

        webview.wantsLayer = true
        webView.layer?.backgroundColor = NSColor.clearColor().CGColor
        

        和包含的 NSView 一样

        webViewParent.layer?.backgroundColor = NSColor.clearColor().CGColor
        

        这是唯一对我有用的东西,我希望它也可以帮助其他人。

        【讨论】:

        • 问题是关于 iOS,而不是 OSX
        【解决方案6】:

        对于使用 Swift 的 iOS 10+:

        self.webView = WKWebView()
        self.webView!.isOpaque = false
        self.webView!.backgroundColor = UIColor.clear
        self.webView!.scrollView.backgroundColor = UIColor.clear
        

        【讨论】:

        • WKWebView.scrollView.backgroundColor 默认已经是清除颜色了。
        • isOpaque 和 background 必须在内容加载后设置才能正常工作,例如在webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)
        • @Andreas,对我来说,它可以通过直接在 Interface Builder 中设置它们来工作,无需推迟它们。
        • 在 iOS 13.0 上不工作(同时在 iOS 13.3 上工作)。
        【解决方案7】:

        如果您正在加载 PDF 并且想要不同于标准灰色的背景颜色,似乎有必要等到文档加载完毕,然后清除子视图的背景。与PDFView(iOS 11+)相比,使用WKWebView 的优势在于WKWebViews 具有双击缩放和内置页数指示器,并且与旧版本的iOS 兼容。

        应该注意的是,像这样深入研究系统视图并不是一个好习惯,因为 Apple 可以随时更改实现,可能会破坏解决方案。

        以下是我在 Swift 4 中实现黑色背景的 PDF 预览控制器的方法:

        class SomeViewController: UIViewController {
        
            var observer: NSKeyValueObservation?
            var url: URL
        
            init(url: URL) {
                self.url = url
                super.init(nibName: nil, bundle: nil)
            }
        
            func viewDidLoad() {
                super.viewDidLoad()
                self.view.backgroundColor = UIColor.black
                let webView = WKWebView()
                webView.translatesAutoResizingMaskIntoConstraints = false
                self.view.addSubview(webView)
                NSLayoutConstraint.activate([
                    webView.topAnchor.constraint(equalTo: self.view.topAnchor),
                    webView.leftAnchor.constraint(equalTo: self.view.leftAnchor),
                    webView.rightAnchor.constraint(equalTo: self.view.rightAnchor),
                    webView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
                ])
        
                self.observer = webView.observe(\.isLoading, changeHandler: { (webView, change) in
                    webView.clearBackgrounds()
                })
        
                webView.loadFileURL(self.url, allowingReadAccessTo: self.url)
        
            }
        }
        
        extension UIView {
            func clearBackgrounds() {
                self.backgroundColor = UIColor.clear
                for subview in self.subviews {
                    subview.clearBackgrounds()
                }
            }
        }
        

        【讨论】:

        • 我需要的正是你所描述的。但不幸的是,您的解决方案不适用于 iOS 12。我的 pdf 文档周围仍有 50% 的灰色边框...
        【解决方案8】:
        using objective c.
        wkWebView.backgroundColor = [UIColor clearColor];
        wkWebView.scrollView.backgroundColor = [UIColor clearColor];
        wkWebView.opaque = false;
        

        它将去除 wkwebView 中的白色背景色。

        【讨论】:

          【解决方案9】:

          我不知道它是否有帮助,但我在下面使用了这个解决方案:

          func setBackgroundWhite(subviews: [UIView]) {
            for subview in subviews {
              subview.backgroundColor = .white
              setBackgroundWhite(subviews: subview.subviews)
            }
           }
          

          这会在子视图中递归调用内部,将背景设置为白色或其他颜色。

          我在加载 PDF 文件时使用了此代码,WKWebView 和 iOS 10+

          【讨论】:

          • 您能否将 PDF 背景颜色从白色更改为任何颜色?当我尝试这个时,它会改变所有背景颜色,但 PDF 仍然是白色的。
          • 你说的是文档的背景颜色吗?
          • 是的。当我在 webview 中加载 PDF 时,PDF 文档有白色背景。有一些应用程序可以更改 PDF 文档的样式(背景颜色和字体颜色),我正在查看上面的代码是否可以执行此操作。
          • 有什么想法吗? @Tiago Amaral ?
          【解决方案10】:

          在 Interface Builder 中取消选中 Opaque 复选框

          2021 年 7 月更新,Xcode 13

          看起来复选框仍然存在

          【讨论】:

          • 没有Opaque复选框,只有Hidden
          • @ErikAigner 我刚刚检查了 Xcode 13,它仍然存在。查看更新
          • 是的,似乎只在 iOS 上可用,虽然WKWebView 两者都存在。
          【解决方案11】:

          使用 Objective-C 的 macOS 的 WKWebView

          这是 macOS 中透明 WKWebView 视图的魔力。

          [webView setValue:[NSNumber numberWithBool: YES] forKey:@"drawsTransparentBackground"];
          

          【讨论】:

          • 男人 36 分,你应该得到更多。你的解决方案很好。
          【解决方案12】:

          在我的情况下,我需要在样式中将背景颜色更改为透明,并从手机/模拟器手册中删除一个应用程序 - 看起来 WKWebView 缓存 HTML / 样式

          【讨论】:

            猜你喜欢
            • 2020-01-21
            • 1970-01-01
            • 2017-07-15
            • 1970-01-01
            • 1970-01-01
            • 2011-03-08
            • 1970-01-01
            • 2021-09-20
            • 2019-02-07
            相关资源
            最近更新 更多