zoukankan      html  css  js  c++  java
  • 用JavaScript动态加载CSS和JS文件

    本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html

    今天项目中需要用到动态加载 CSS 文件,经过一番折腾终于搞定,回家整理了一下,顺便融合了动态加载 JS 的功能写成了一个对象,先上代码:

    var dynamicLoading = {
        css: function(path){
            if(!path || path.length === 0){
                throw new Error('argument "path" is required !');
            }
            var head = document.getElementsByTagName('head')[0];
            var link = document.createElement('link');
            link.href = path;
            link.rel = 'stylesheet';
            link.type = 'text/css';
            head.appendChild(link);
        },
        js: function(path){
            if(!path || path.length === 0){
                throw new Error('argument "path" is required !');
            }
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.src = path;
            script.type = 'text/javascript';
            head.appendChild(script);
        }
    }

    对象包含两个完全独立的方法,分别用来加载 CSS 文件和 JS 文件,参数均为欲加载的文件路径。原理非常的简单:对于不同的加载文件类型创建不同的节点,然后添加各自的属性,最后扔到 head 标签里面。经测试,本方法兼容各浏览器,安全、无毒、环保,实乃 web 开发人员工作常备代码,请放心使用。
    下面是调用代码,异常简单:

    //动态加载 CSS 文件
    dynamicLoading.css("test.css");
    
    //动态加载 JS 文件
    dynamicLoading.js("test.js");

    这里还提供了本文的 demo ,下载、解压,如果一切正常,打开 HTML 文件,页面将弹出对话框,并呈现鲜艳的红色,这说明它已经成功地动态加载了外部的 CSS 和 JS 文件。

    dynamic_loading.zip

    function loadScript(url, callback) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        // IE
        if (script.readyState) {
            script.onreadystatechange = function () {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else { // others
            script.onload = function () {
                callback();
            };
        }
        script.src = url;
        document.body.appendChild(script);
    }

    使用

    loadScript("http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js", function () {
        alert('loaded');
    });

    PS:上面的例子要注意,callback作参数传进去的时候是不好使的,因为调用的地方在别的绑定方法里,这里的callback要做全局变量,且在方法外定义好

  • 相关阅读:
    elasticsearch 基础 —— 集群原理
    剑指 offer set 10 栈的压入、弹出序列
    剑指 offer set 9 包含min函数的栈
    剑指 offer set 8 树的子结构
    剑指 offer set 7 调整数组顺序使奇数位于偶数前面
    剑指 offer set 6 打印从 1 到 N 的所有数
    剑指 offer set 5 二进制中 1 的个数
    剑指 offer set 4 矩形覆盖
    剑指 offer set 3 旋转数组的最小数字
    剑指 offer set 2 从头到尾打印链表
  • 原文地址:https://www.cnblogs.com/wpcnblog/p/5996913.html
Copyright © 2011-2022 走看看