javascript - informatique - interaction js html




Importation dynamique de JavasScript (2)

Quelle est la méthode correcte pour importer dynamiquement des fichiers JavaScript (.js) dans un code JavaScript parent, s'il vous plaît?

J'utilise le code suivant, mais cela ne semble pas correct:

    function loadjscssfile(filename, filetype)
{
    //if filename is a external JavaScript file
    if (filetype=="js")
    {
        var fileref=document.createElement('script');
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src", filename);
    }
    //if filename is an external CSS file
    else if (filetype=="css")
    {
        var fileref=document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);
    }
    if (typeof fileref!="undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref)
}

Je pense, le code n'est pas correct, parce que, dans le code JavaScript maître, je ne peux pas lire les variables définies dans le code importé, tels que:

var fileRef = loadjscssfile('Language/svk.js', 'js');
alert("Pet Name: " + PETNAME);

Le fichier svk.js importé contient le seul code:

// JavaScript Document
var PETNAME = "Beauty";

Je vous remercie.


Dans svk.js ajoutez ce qui suit (après la décélération de la variable):

svkLoaded();

Dans le fichier de code maître, ajoutez ce qui suit:

function svkLoaded()
{
    alert("Pet Name: " + PETNAME);
}

La raison pour laquelle vous ne pouvez pas lire la variable PETNAME est que l'injection dynamique de scripts comme celui-ci est asynchrone et non bloquante. Cela signifie que votre alert s'exécute avant que le script n'ait été chargé. Au lieu de cela, vous devrez peut-être rechercher l'existence de la variable PETNAME :

var waitForPETNAME = function(){
        if (typeof PETNAME === 'undefined') {
            setTimeout(waitForPETNAME, 15);
        } else {
            // execute code that uses PETNAME
        }
    };

waitForPETNAME();

En outre, un moyen plus infaillible d'injecter des éléments de manière dynamique consiste à les insérer avant le premier élément de script, car vous savez avec certitude qu'un élément de script doit exister (sinon, vous n'exécuteriez pas de code). En d'autres termes, remplacez:

document.getElementsByTagName("head")[0].appendChild(fileref)

avec:

var insref = document.getElementsByTagName('script')[0];
insref.parentNode.insertBefore(fileref, insref);




dynamic-html