Comment JS natif charge dynamiquement les fichiers JS et CSS et les scripts de code

Cet article vous présente comment le JS natif charge dynamiquement les fichiers JS et CSS et les scripts de code. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

L'attribut DOM readyState a 5 états au total

1. uninitialized : État initial

2. loading : chargement du document

3. loaded : chargement du document terminé

4. interactive : chargé et peut interagir avec l'utilisateur, mais D'autres ressources telles que les images doivent être chargées

5. complete : Toutes les ressources sont chargées

Ordre de chargement des documents DOM :

1. Analyser la structure HTML

2. Chargement de scripts externes et de fichiers de feuilles de style (chargement)

3. Analyser et exécuter le script

4. Construction de l'arborescence DOM terminée (readyState : interactif)

5. Charger les fichiers de ressources externes (images, etc.)

6. Chargement de la page terminé (readyState : terminé)

Méthode publique de chargement dynamique

var DynamciLoadUtil = {
    // 动态加载外部js文件，并执行回调
    loadJS: function(url, callback){
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;
        if(typeof callback == 'function'){
            script.onload = script.onreadystatechange = function(){
                if(!this.readyState || this.readyState == 'loaded'
                                    || this.readyState == 'complete'){
                    callback();
                    script.onload = script.onreadystatechange = null;
                }
            }
        }
        document.body.appendChild(script);
        //document.getElementsByTagName('body')[0].appendChild(script);
    },
    // 行内方式动态加载js代码
    loadJSText: function(jsText){
        var script = document.createElement('script');
        script.type = 'text/javascript';
        try {
            // Firefox,Safari,Chrome,Opera支持
            script.appendChild(document.createTextNode(jsText));
        } catch(ex){
            // IE早期的浏览器，需要使用script的text属性来指定js代码
            script.text = jsText;
        }
        document.body.appendChild(script);
    },
    // 动态加载外部CSS文件
    loadCSS:function(url){
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.url = url;
        document.getElementsByTagName('head')[0].appendChild(link);
    },
    // 使用<style>标签包含嵌入式CSS
    loadCSSText: function(cssText){
        var style = document.createElement('style');
        style.type = 'text/css';
        try{
            // Firefox,Safari,Chrome,Opera支持
            style.appendChild(document.createTextNode(cssText));
        } catch(ex){
            // IE早期浏览器，需要使用style元素的styleSheet属性的cssText属性
            style.styleSheet.cssText = cssText;
        }
    }
}

Recommandations associées :

Implémentation JS de l'analyse d'algorithmes de reconstruction d'arbres binaires

Analyse de la méthode Object.defineProperty() en JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!