How native JS dynamically loads JS and CSS files and code scripts

This article introduces to you how native JS dynamically loads JS and CSS files and code scripts. It has certain reference value. Friends in need can refer to it.

DOM readyState attribute has 5 states in total

1. uninitialized：Initial state

2. loading：The document is loading

3. ##loaded: The document loading is completed

4. interactive: Loaded and can interact with the user, but other resources such as images need to be loaded

5. complete: All resources have been loaded

DOM document loading sequence:

1. Parse HTML structure

2. Load external script and style sheet file (loading)

3. Parse and execute the script

4. DOM tree construction completed (readyState: interactive)

5. Load external resource files (pictures, etc.)

6. Page loading completed (readyState: complete)

Dynamic loading public method

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

Related recommendations:

js implementation of algorithm analysis for reconstructing binary trees

Object.defineProperty( in JavaScript ) method analysis

The above is the detailed content of How native JS dynamically loads JS and CSS files and code scripts. For more information, please follow other related articles on the PHP Chinese website!