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要做全局变量,且在方法外定义好

  • 相关阅读:
    HDU 4393 Throw nails(贪心加模拟,追及问题)
    【Add Two Numbers】
    【Single Num II】cpp
    【Single Number】cpp
    【Candy】cpp
    【Gas Station】cpp
    【Set Matrix Zeros】cpp
    【Gray Code】cpp
    【Climbing Stairs】cpp
    【Plus One】cpp
  • 原文地址:https://www.cnblogs.com/wpcnblog/p/5996913.html
Copyright © 2011-2022 走看看