Comment faire pour déterminer la taille du contenu d'un WKWebView?

Je pense que j'ai lu toute les réponses sur ce sujet et j'avais une partie de la solution. La plupart du temps j'ai passé à essayer de mettre en œuvre KVO méthode décrite par @davew, ce qui a parfois travaillé, mais la plupart du temps laissé un espace blanc sous le contenu d'un WKWebView conteneur. J'ai également implémenté @David Beck suggestion et fait de la hauteur du conteneur à 0 évitant ainsi la possibilité que le problème se produit si la hauteur du conteneur est plus grande que celle du contenu. Malgré que j'ai eu ce occasionnels espace vide.
Donc, pour moi, "contentSize" observateur avait beaucoup de défauts. Je n'ai pas beaucoup d'expérience avec les technologies web donc je ne peux pas répondre à ce qui était le problème avec cette solution, mais j'ai vu que si je n'avais hauteur d'impression dans la console, mais ne pas faire quelque chose avec elle (par exemple. redimensionner les contraintes), il accède à un certain nombre (par exemple, 5000) et va que pour le nombre avant que la plus haute (par exemple: 2500 - qui s'avère être la bonne). Si je dois définir la hauteur de la contrainte à la hauteur de qui je reçois de "contentSize" il définit lui-même pour le plus grand nombre il obtient et ne se met jamais redimensionnées à la bonne - qui est, encore une fois, mentionné par @David Beck commentaire.

Après beaucoup d'expériences que j'ai réussi à trouver une solution qui fonctionne pour moi:

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    self.webView.evaluateJavaScript("document.readyState", completionHandler: { (complete, error) in
        if complete != nil {
            self.webView.evaluateJavaScript("document.body.scrollHeight", completionHandler: { (height, error) in
                self.containerHeight.constant = height as! CGFloat
            })
        }

        })
}

Bien sûr, il est important de définir les contraintes correctement de sorte que le scrollView redimensionne en fonction de la containerHeight contrainte.

Comme il s'avère didFinish méthode de navigation n'est jamais appelé quand je voulais, mais ayant obtenu document.readyState étape, la suivante (document.body.offsetHeight) est appelée au bon moment, en revenant à moi le bon numéro à la hauteur.

J'ai eu à traiter cette question de moi-même récemment. En fin de compte, j'ai été en utilisant une modification de la solution proposée par Chris McClenaghan.

En fait, sa solution originale est très bonne et il fonctionne dans la plupart des cas simples. Toutefois, elle n'a fonctionné pour moi sur des pages avec du texte. Probablement il travaille également sur des pages avec des images qui ont une hauteur statique. Cependant, il n'a certainement pas le travail quand vous avez des images dont la taille est définie avec max-height et max-width attributs.

Et c'est parce que ces éléments peuvent obtenir redimensionné après la page est chargée. Donc, en fait, la hauteur retournée dans onLoad sera toujours correcte. Mais il n'est correcte que pour ce cas particulier. La solution de contournement consiste à surveiller le changement de la body hauteur et d'y répondre.

Surveiller le redimensionnement de la document.body

var shouldListenToResizeNotification = false
lazy var webView:WKWebView = {
    //Javascript string
    let source = "window.onload=function () {window.webkit.messageHandlers.sizeNotification.postMessage({justLoaded:true,height: document.body.scrollHeight});};"
    let source2 = "document.body.addEventListener( 'resize', incrementCounter); function incrementCounter() {window.webkit.messageHandlers.sizeNotification.postMessage({height: document.body.scrollHeight});};"

    //UserScript object
    let script = WKUserScript(source: source, injectionTime: .atDocumentEnd, forMainFrameOnly: true)

    let script2 = WKUserScript(source: source2, injectionTime: .atDocumentEnd, forMainFrameOnly: true)

    //Content Controller object
    let controller = WKUserContentController()

    //Add script to controller
    controller.addUserScript(script)
    controller.addUserScript(script2)

    //Add message handler reference
    controller.add(self, name: "sizeNotification")

    //Create configuration
    let configuration = WKWebViewConfiguration()
    configuration.userContentController = controller

    return WKWebView(frame: CGRect.zero, configuration: configuration)
}()

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    guard let responseDict = message.body as? [String:Any],
    let height = responseDict["height"] as? Float else {return}
    if self.webViewHeightConstraint.constant != CGFloat(height) {
        if let _ = responseDict["justLoaded"] {
            print("just loaded")
            shouldListenToResizeNotification = true
            self.webViewHeightConstraint.constant = CGFloat(height)
        }
        else if shouldListenToResizeNotification {
            print("height is \(height)")
            self.webViewHeightConstraint.constant = CGFloat(height)
        }

    }
}

Cette solution est de loin la plus élégante que je pouvais venir. Il ya, cependant, deux choses que vous devez être conscient de.

Tout d'abord, avant le chargement de votre URL, vous devez définir shouldListenToResizeNotification à false. Cette logique supplémentaire est nécessaire pour les cas où le chargement de l'URL peut changer rapidement. Lorsque cela se produit, les notifications de l'ancien contenu pour quelque raison peut se chevauchent avec ceux du nouveau contenu. Pour empêcher un tel comportement, j'ai créé cette variable. Il assure qu'une fois que nous commençons à charger de nouveau contenu, nous n'avons plus le processus de notification de l'ancien et nous ne reprendre le traitement de redimensionner les notifications d'après le nouveau contenu est chargé.

Plus important encore, cependant, vous devez être au courant à ce sujet:

Si vous adoptez cette solution, vous devez prendre en compte que si vous modifiez la taille de votre WKWebView à rien d'autre que la taille de la notification la notification sera déclenché à nouveau.

Être prudent avec ce qu'il est facile d'entrer dans une boucle infinie. Par exemple, si vous décidez de gérer la notification par faire votre hauteur égale à signalé hauteur + quelques rembourrage supplémentaire:

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        guard let responseDict = message.body as? [String:Float],
        let height = responseDict["height"] else {return}
        self.webViewHeightConstraint.constant = CGFloat(height+8)
    }

Comme vous pouvez le voir, parce que je suis l'ajout de 8 à la hauteur, après ceci est fait la taille de mon body change et l'avis sera affiché à nouveau.

Être attentifs à ces situations et sinon, vous devriez être bien.

Et s'il vous plaît laissez-moi savoir si vous découvrez un problème avec cette solution, je suis fier de moi-même si il est préférable de savoir si il y a des erreurs que je n'ai pas repéré!

Vous avez besoin d'attendre pour la webview à la fin du chargement. Voici un exemple que j'ai utilisé

WKWebView Contenu chargé de la fonction ne jamais être appelé

Puis après webview a fini de charger, ensuite, vous pouvez déterminer les hauteurs dont vous avez besoin en

func webView(webView: WKWebView!, didFinishNavigation navigation: WKNavigation!) {

   println(webView.scrollView.contentSize.height)

}

à l'aide de @Andriy la réponse de cette réponse j'ai été en mesure de définir obtenir la hauteur de contentSize dans WKWebView et en modifier la hauteur.

ici est plein de swift 4 code:

    var neededConstraints: [NSLayoutConstraint] = []
@IBOutlet weak var webViewContainer: UIView!
@IBOutlet weak var webViewHeight: NSLayoutConstraint! {
didSet {
if oldValue != nil, oldValue.constant != webViewHeight.constant {
view.layoutIfNeeded()
}
}
}
lazy var webView: WKWebView = {
var source = """
var observeDOM = (function(){
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
eventListenerSupported = window.addEventListener;
return function(obj, callback){
if( MutationObserver ){
//define a new observer
var obs = new MutationObserver(function(mutations, observer){
if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
callback();
});
//have the observer observe foo for changes in children
obs.observe( obj, { childList:true, subtree:true });
}
else if( eventListenerSupported ){
obj.addEventListener('DOMNodeInserted', callback, false);
obj.addEventListener('DOMNodeRemoved', callback, false);
}
};
})();
//Observe a specific DOM element:
observeDOM( document.body ,function(){
window.webkit.messageHandlers.sizeNotification.postMessage({'scrollHeight': document.body.scrollHeight,'offsetHeight':document.body.offsetHeight,'clientHeight':document.body.clientHeight});
});
"""
let script = WKUserScript(source: source, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
let controller = WKUserContentController()
controller.addUserScript(script)
controller.add(self, name: "sizeNotification")
let configuration = WKWebViewConfiguration()
configuration.userContentController = controller
let this = WKWebView(frame: .zero, configuration: configuration)
webViewContainer.addSubview(this)
this.translatesAutoresizingMaskIntoConstraints = false
this.scrollView.isScrollEnabled = false
//constraint for webview when added to it's superview
neededConstraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|[web]|",
options: [],
metrics: nil,
views: ["web": this])
neededConstraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|[web]|",
options: [],
metrics: nil,
views: ["web": this])
return this
}()
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
_  = webView //to create constraints needed for webView
NSLayoutConstraint.activate(neededConstraints)
let url = URL(string: "https://www.awwwards.com/")!
let request = URLRequest(url: url)
webView.load(request)
}
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
if let body = message.body as? Dictionary<String, CGFloat>,
let scrollHeight = body["scrollHeight"],
let offsetHeight = body["offsetHeight"],
let clientHeight = body["clientHeight"] {
webViewHeight.constant = scrollHeight
print(scrollHeight, offsetHeight, clientHeight)
}
}

Vous pouvez également obtenu le contenu de la hauteur de WKWebView par evaluateJavaScript.

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
[webView evaluateJavaScript:@"Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight)"
completionHandler:^(id _Nullable result, NSError * _Nullable error) {
if (!error) {
CGFloat height = [result floatValue];
//do with the height
}
}];
}

J'ai essayé la version Javascript dans UITableViewCell, et il fonctionne parfaitement. Toutefois, si vous voulez le mettre dans la scrollView. Je ne sais pas pourquoi, la hauteur peut être plus, mais on ne peut pas être plus courte. Cependant, j'ai trouvé une UIWebView solution ici. https://stackoverflow.com/a/48887971/5514452

Il travaille également dans WKWebView. Je pense que le problème est dû à la WebView besoin nouvelle disposition, mais de toute façon il ne rétrécit pas et ne peut l'agrandir. Nous avons besoin de réinitialiser la hauteur et il va certainement redimensionner.

Edit: j'ai réinitialisé la hauteur du cadre après la définition de la contrainte, parce que parfois, il ne va pas travailler pour cause de réglage de la hauteur du cadre à 0.

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
self.webView.frame.size.height = 0
self.webView.evaluateJavaScript("document.readyState", completionHandler: { (complete, error) in
if complete != nil {
self.webView.evaluateJavaScript("document.body.scrollHeight", completionHandler: { (height, error) in
let webViewHeight = height as! CGFloat
self.webViewHeightConstraint.constant = webViewHeight
self.webView.frame.size.height = webViewHeight
})
}
})
}

Également essayé de mettre en œuvre les différentes méthodes et finalement venu à une solution. En conséquence, j'ai fait un auto-dimensionnement WKWebView, qui s'adapte à ses intrinsicContentSize à la taille de son contenu. De sorte que vous pouvez l'utiliser dans Automatique des Mises en page. Comme un exemple, j'ai fait un point de vue, qui pourrait vous aider à afficher formule math sur iOS apps: https://github.com/Mazorati/SVLatexView

Après beaucoup d'expériences que j'ai réussi à trouver une solution qui fonctionne pour moi, j'ai trouvé pour faire une webview hauteur dynamique sans l'aide de l'évaluation de javascript et aussi sans prendre de hauteur constante de webview ce travail avec moi comme un charme et aussi de travailler quand j'ai injecter un nouveau style pour HTML et de jouer avec les tailles de police et les hauteurs

code Swift

1 - donnez votre Webview de navigation délégué

  webView.navigationDelegate = self

2 - en délégation extension

extension yourclass : WKNavigationDelegate {
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
//Handel Dynamic Height For Webview Loads with HTML
//Most important to reset webview height to any desired height i prefer 1 or 0  
webView.frame.size.height = 1
DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
//here get height constant and assign new height in it 
if let constraint = (webView.constraints.filter{$0.firstAttribute == .height}.first) {
constraint.constant = webView.scrollView.contentSize.height
}
}

espérons que cela fonctionne également avec vous les gars
** notez que ce n'est pas mon effort j'ai beaucoup cherché dans StackOverflow et d'autres sites et c'est ce qui fonctionne enfin avec moi, avec un grand nombre de tests aussi