web-dev-qa-db-fra.com

Comment faire pour charger un script de contenu APRES l'exécution d'une page par Javascript?

Mon extension est censée charger un script de contenu, searchTopic.js, uniquement après que la page dans laquelle elle est injectée est déjà entièrement chargée (oui, j'ai défini "run_at" sur "document_end" dans le manifeste de l'extension), mais en réalité, il se charge avant tous les objets DOM ont été créés (les plus importants sont créés via du Javascript dans la page). La question est donc de savoir comment puis-je attendre que le code Javascript de la page soit exécuté? Voici mon manifeste:

"content_scripts": [
  {
  "run_at": "document_end",
  "matches": ["https://groups.google.com/forum/*"],
  "js": ["searchTopic.js"]
  }
],
javascriptgoogle-chrome-extensioncontent-script
22
FractalBob

"run_at": "document_end" est l'équivalent de DOMContentLoaded. C’est-à-dire qu’il se déclenche après le chargement du HTML static, mais avant les images lentes et la finition lente de javascript.

Par conséquent, vous ne pouvez pas configurer un script de contenu pour qu'il se déclenche après le JS de la page, en définissant uniquement le manifeste. Vous devez coder pour cela dans le script de contenu lui-même.

Pour les scripts de contenu, "run_at": "document_end" sera déclenché avant l'événement onload (contrairement au document_idle par défaut - qui peut se déclencher à des heures imprévisibles). 

La première étape consiste donc à attendre l'événement load avec un code comme celui-ci dans votre script de contenu (searchTopic.js):

window.addEventListener ("load", myMain, false);

function myMain (evt) {
    // DO YOUR STUFF HERE.
}


Dans le cas où le script qui vous tient à coeur prend un certain temps, vous devrez rechercher une condition au cas par cas. Par exemple:

window.addEventListener ("load", myMain, false);

function myMain (evt) {
    var jsInitChecktimer = setInterval (checkForJS_Finish, 111);

    function checkForJS_Finish () {
        if (    typeof SOME_GLOBAL_VAR != "undefined"
            ||  document.querySelector ("SOME_INDICATOR_NODE_css_SELECTOR")
        ) {
            clearInterval (jsInitChecktimer);
            // DO YOUR STUFF HERE.
        }
    }
}
38
Brock Adams

Les éléments script sont exécutés dans l'ordre. Le navigateur arrête même de charger le contenu DOM s'il y a des nœuds script dans la body. Ceci est garanti pour fonctionner, sinon document.write() cesserait de fonctionner.

Donc vous avez deux solutions:

  1. Utilisez l'événement onload pour charger votre code.
  2. Ajoutez une balise de script comme dernier élément de la page (dernière chose dans l'élément body). Ce script sera exécuté une fois tous les autres scripts terminés et après la conversion du corps en une arborescence DOM.
2
Aaron Digulla

Vous utilisez la méthode window.load.

function addLoadEvent(a) {
    var b = window.onload;
    "function" != typeof window.onload ? window.onload = a : window.onload = function () {
        b && b(),
            a()
    }
}
function init() {
    alert('init');
}
addLoadEvent(init);
0
STEEL