js实用方法记录-js动态加载css、js脚本文件

冷不防 2022-05-30 01:40 193阅读 0赞

https://www.cnblogs.com/morang/p/dynamicloadjscssiframe.html

# js实用方法记录-动态加载css/js #

> 附送一个加载iframe,h5打开app代码

## 1. 动态加载js文件到head标签并执行回调 ##

> 方法调用：`dynamicLoadJs('http://www.yimo.link/static/js/main.min.js',function(){alert('加载成功')});`

/**
         * 动态加载JS
         * @param {string} url 脚本地址
         * @param {function} callback  回调函数
         */
        function dynamicLoadJs(url, callback) {
          
            var head = document.getElementsByTagName('head')[0];
            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;
                    }
                };
            }
            head.appendChild(script);
        }

## 2. 动态加载css文件到head ##

> 方法调用： `dynamicLoadCss('http://www.yimo.link/static/css/style.css')`

/**
         * 动态加载CSS
         * @param {string} url 样式地址
         */
        function dynamicLoadCss(url) {
          
            var head = document.getElementsByTagName('head')[0];
            var link = document.createElement('link');
            link.type='text/css';
            link.rel = 'stylesheet';
            link.href = url;
            head.appendChild(link);
        }

## 3. 动态加载脚本文件 ##

> 参考：[http://www.cnblogs.com/yuanke/p/5039699.html][http_www.cnblogs.com_yuanke_p_5039699.html]

/**
         * 动态加载css脚本
         * @param {string} cssText css样式
         */
        function loadStyleString(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;
            }
            document.getElementsByTagName("head")[0].appendChild(style);
        }
        // 测试
        var css = "body{color:blue;}";
        loadStyleString(css);

/**
         * 动态加载js脚本
         * @param {string} code js脚本
         */
        function loadScriptString(code) {
          
            var script = document.createElement("script");
            script.type = "text/javascript";
            try{
          
                // firefox、safari、chrome和Opera
                script.appendChild(document.createTextNode(code));
            }catch(ex) {
          
                // IE早期的浏览器 ,需要使用script的text属性来指定javascript代码。
                script.text = code;
            }
            document.getElementsByTagName("head")[0].appendChild(script);
        }
        // 测试
        var text = "function test(){alert('test');}";
        loadScriptString(text);
        test();

## 4. 动态加载iframe到body标签并执行回调 ##

> 方法调用：`dynamicLoadIframe('http://www.yimo.link',function(){alert('加载成功')},'');`

/**
       * 动态加载Iframe
       * @param {string} url 脚本地址
       * @param {function} callback  回调函数
       * @param {string} style  加载样式
       */
      function dynamicLoadIframe(url,callback,style) {
          
        var body = document.getElementsByTagName('body')[0];
        var iframe = document.createElement('iframe');
        iframe.src = url;
        iframe.style=style||'display:none;width:0px;height:0px;';
        if(typeof(callback)=='function'){
          
            iframe.onload = iframe.onreadystatechange = function () {
          
                if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
          
                    callback();
                    iframe.onload = iframe.onreadystatechange = null;
                }
            };
        }
        body.appendChild(iframe);
      }

## 5. M站中下载/打开app ##

方法测试：`openApp('ios页面','**.apk','metools://home');`

[http_www.cnblogs.com_yuanke_p_5039699.html]: http://www.cnblogs.com/yuanke/p/5039699.html