ios - WKWebView 的透明背景

Question

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

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

上面的代码在 UIWebView 上运行良好，但如果 webView 是 WKWebView，则会显示白色背景。

还尝试在 CSS 中放置透明背景颜色。结果是一样的，只适用于 UIWebView 而不是 WKWebView。有什么建议吗？

score 75 · Accepted Answer

对于使用 Swift 的 iOS 10+：

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

score 34 · Accepted Answer

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

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

score 8 · Accepted Answer

using objective c.
wkWebView.backgroundColor = [UIColor clearColor];
wkWebView.scrollView.backgroundColor = [UIColor clearColor];
wkWebView.opaque = false;

它将删除 wkwebView 中的白色背景颜色。

score 5 · Accepted Answer

5

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

于 2014-08-04T21:44:45.473 回答

score 5 · Accepted Answer

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

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

和包含 NSView 的方式相同

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

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

score 3 · Accepted Answer

3

下面的代码对我有用：

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

于 2015-05-16T21:22:49.347 回答

score 3 · Accepted Answer

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

2021 年 7 月更新，Xcode 13

看起来复选框仍然存在

score 2 · Accepted Answer

带有 Objective-C 的 macOS 的 WKWebView

这是 macOS 中透明 WKWebView 视图的神奇之处。

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

score 1 · Accepted Answer

如果您正在加载 PDF 并且想要不同于标准灰色的背景颜色，则似乎有必要等到文档加载完毕，然后清除子视图的背景。使用 a WKWebViewover a PDFView(iOS 11+)的优点是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()
        }
    }
}

score 0 · Accepted Answer

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

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

希望能帮助到你。

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

ios - WKWebView 的透明背景

12 回答 12

Related

Reference