web-dev-qa-db-fra.com

Fond transparent pour WKWebView

Dans mon application, je souhaite créer le WKWebView avec un fond transparent, de sorte que la vue derrière (une ImageView) puisse apparaître comme image d'arrière-plan.

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

Le code ci-dessus fonctionne correctement avec UIWebView, mais si webView est WKWebView, un fond blanc sera affiché.

A également essayé de mettre la couleur d'arrière-plan transparente dans CSS. Le résultat est le même, ne fonctionne que dans UIWebView mais pas WKWebView. Toute suggestion?

iosswiftwkwebview
41
Lim Thye Chean

Pour iOS 10+ utilisant Swift:

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

Ce code pourrait vous aider. Mis à jour pour Swift 3+

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

Ce bogue semble avoir été corrigé dans la version bêta 5.

5
mszaro

Le code ci-dessous fonctionne pour moi:

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

Je sais que c'est une très vieille question. Mais je me bats avec ça aujourd'hui. Je ne sais pas si c'est juste moi, mais webView.backgroundColor n'était pas défini dans WKWebView et webView.opaque était en lecture seule. La seule façon pour moi de résoudre ce problème était de définir la couleur d'arrière-plan du calque des vues Web sur CGColor clear

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

et le NSView contenant de la même manière

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

C'est la seule chose qui a fonctionné pour moi, j'espère que cela pourrait aussi aider quelqu'un d'autre.

2
bedalton
using Objective C.
wkWebView.backgroundColor = [UIColor clearColor];
wkWebView.scrollView.backgroundColor = [UIColor clearColor];
wkWebView.opaque = false;

Il supprimera la couleur d'arrière-plan blanc dans wkwebView.

2
John Rakesh

Si vous chargez un PDF et que vous voulez une couleur d'arrière-plan différente du gris standard, il semble qu'il faut attendre que le document soit chargé, puis effacer l'arrière-plan des sous-vues. La l'avantage d'utiliser un WKWebView par rapport à un PDFView (iOS 11+) est que les WKWebView ont un double-clic pour zoomer et un indicateur de nombre de pages intégré, et sont compatibles avec les anciens versions d'iOS.

Il convient de noter que ce n'est pas une bonne pratique de creuser dans des vues système comme celle-ci car Apple peut changer l'implémentation à tout moment, ce qui peut potentiellement casser la solution.

Voici comment j'ai implémenté un contrôleur de prévisualisation PDF avec un fond noir dans Swift 4:

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()
        }
    }
}
1
Phil

Je ne sais pas si cela peut aider, mais j'ai utilisé cette solution ci-dessous:

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

Cela effectue un appel récursif interne dans les sous-vues, en configurant l'arrière-plan en blanc ou en une autre couleur.

J'ai utilisé ce code lors du chargement de PDF, WKWebView et iOS 10+

0
Tiago Amaral

Je n'ai pas encore travaillé avec WKWebView, mais même UIWebView avait ce problème et la solution consistait à envelopper le contenu html dans quelque chose comme ceci:

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

J'espère que ça aide.

0
babibo