Comment puis-je détecter quand un élément est visible après le chargement du site web dans WKWebView ?

Question

Je suis en train de charger un site web de transport pour que je puisse extraire les heures d'arrêt pour un arrêt donné. Après avoir chargé l'URL, les horaires d'arrêt sont chargés un peu plus tard de manière dynamique via JavaScript. Mon objectif est de détecter la présence d'éléments avec une classe de "stop-time". Si ces éléments sont présents dans le html, je peux ensuite analyser le html. Mais avant de pouvoir analyser le html, je dois attendre que ces éléments avec la classe "stop-time" apparaissent. J'ai lu à travers un tas d'autres questions SO mais je n'ai pas réussi à l'assembler complètement. J'implémente la fonction didReceive message mais je ne suis pas vraiment sûr de comment charger le JavaScript dont j'ai besoin pour détecter la présence des éléments (éléments avec la classe "stop-time"). J'ai réussi à insérer du JavaScript pour éviter que la fenêtre de permission de localisation ne s'affiche.

override func viewDidLoad() {
    super.viewDidLoad()

    let contentController = WKUserContentController()
    let scriptSource = "navigator.geolocation.getCurrentPosition = function(success, error, options) {}; navigator.geolocation.watchPosition = function(success, error, options) {}; navigator.geolocation.clearWatch = function(id) {};"
    let script = WKUserScript(source: scriptSource, injectionTime: .atDocumentStart, forMainFrameOnly: true)
    contentController.addUserScript(script)

    let config = WKWebViewConfiguration()
    config.userContentController = contentController

    webView = WKWebView(frame: .zero, configuration: config)
    self.view = self.webView!

    loadStopTimes("https://www.website.com/stop/1000")
}

func loadStopTimes(_ busUrl: String) {
    let urlString = busUrl
    let url = URL(string: urlString)!
    let urlRequest = URLRequest(url: url)
    webView?.load(urlRequest)
}

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    if(message.name == "stopTimesLoaded") {
        // stop times maintenant présents donc prendre le html et analyser les heures d'arrêt
    }
}

Answer 1

Tout d'abord, vous devez injecter le script suivant pour détecter l'apparition d'éléments via l'observateur de mutations :

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      console.log('mutation.type = ' + mutation.type);
      for (var i = 0; i < mutation.addedNodes.length; i++) {
        var node = mutation.addedNodes[i];
        if (node.nodeType == Node.ELEMENT_NODE && node.className == 'stop-time') {
            var content = node.textContent;
            console.log('  "' + content + '" ajouté');
            window.webkit.messageHandlers.stopTimesLoaded.postMessage({ data: content });
        }
      }
    });
  });
observer.observe(document, { childList: true, subtree: true });

Ensuite, vous devez vous abonner à l'événement 'stopTimesLoaded' :

contentController.add(self, name: "stopTimesLoaded")

Et enfin, ajoutez du code pour traiter les données dans

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage)