Heim >Web-Frontend >js-Tutorial >Wie natives JS JS- und CSS-Dateien und Codeskripte dynamisch lädt

Wie natives JS JS- und CSS-Dateien und Codeskripte dynamisch lädt

不言
不言Original
2018-07-20 11:25:551490Durchsuche

In diesem Artikel erfahren Sie, wie natives JS JS- und CSS-Dateien und Codeskripte dynamisch lädt. Freunde in Not können darauf verweisen.

DOM readyState-Attribut hat insgesamt 5 Zustände

  1. uninitialized: Anfangszustand

  2. loading: Laden des Dokuments

  3. loaded: Laden des Dokuments abgeschlossen

  4. interactive: geladen und kann mit dem Benutzer interagieren, aber Andere Ressourcen wie Bilder müssen geladen werden

  5. complete: Alle Ressourcen werden geladen

Ladereihenfolge des DOM-Dokuments:

  1. HTML-Struktur analysieren

  2. Externe Skripte und Stylesheet-Dateien laden (Laden)

  3. Das Skript analysieren und ausführen

  4. DOM-Baumkonstruktion abgeschlossen (readyState: interaktiv)

  5. Externe Ressourcendateien (Bilder usw.) laden

  6. Laden der Seite abgeschlossen (readyState: abgeschlossen)

Dynamisches Laden öffentlicher Methoden

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;
        }
    }
}

Verwandte Empfehlungen:

JS-Implementierung der Algorithmusanalyse zur Rekonstruktion von Binärbäumen

Analyse der Object.defineProperty()-Methode in JavaScript

Das obige ist der detaillierte Inhalt vonWie natives JS JS- und CSS-Dateien und Codeskripte dynamisch lädt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn