动态加载js和css

2017-03-02 09:45:27

开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法。

 1、动态加载js

  方法一:动态加载js文件


function loadScript(url) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
}

  方法二:动态加载js脚本

// 动态加载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.body.appendChild(script);
}
// 测试
var text = "function test(){alert('test');}";
loadScriptString(text);
test();

2、动态加载css

  方法一:动态加载css文件

/**
 * / 动态加载css文件
 * @param url
 */
function loadStyles(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}

  方法二:动态加载css脚本

// 动态加载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);


  • 2018-03-08 09:47:14

    ES6,Array.fill()函数的用法

    ES6为Array增加了fill()函数,使用制定的元素填充数组,其实就是用默认内容初始化数组。

  • 2018-03-08 09:53:39

    document.readyState

    一个document 的 Document.readyState 属性描述了文档的加载状态。

  • 2018-03-09 02:09:23

    ArrayBuffer:类型化数组

    ArrayBuffer对象、TypedArray对象、DataView对象是JavaScript操作二进制数据的一个接口。这些对象早就存在,属于独立的规格,ES6将它们纳入了ECMAScript规格,并且增加了新的方法。

  • 2018-03-09 11:45:11

    SQL SELECT DISTINCT 语句

    如需从 Company" 列中仅选取唯一不同的值,我们需要使用 SELECT DISTINCT 语句:

  • 2018-03-13 22:42:44

    TraceView报错:unable to open trace file

    程序效率有些问题,想起用TraceView来分析一下,可是一直报标题中的错误,无法创建出我所需要的aa.trace文件,分析也就无从做起。