zoukankan      html  css  js  c++  java
  • 使用js加载器动态加载外部js、css文件

    let MiniSite = new Object();
    /**
     * 判断浏览器
     */
    MiniSite.Browser = {
        ie: /msie/.test(window.navigator.userAgent.toLowerCase()),
        moz: /gecko/.test(window.navigator.userAgent.toLowerCase()),
        opera: /opera/.test(window.navigator.userAgent.toLowerCase()),
        safari: /safari/.test(window.navigator.userAgent.toLowerCase())
    };
    /**
     * 加载外部的文件
     * @param sUrl 要加载的文件的url地址
     * @param fileType 要加载的文件的类型
     * @fCallback 文件加载完成之后的处理函数
     */
    MiniSite.JsLoader = function(sUrl, fileType, fCallback) {
        let fileHref;
        if (fileType == "js") {
            fileHref = document.createElement('script');
            fileHref.setAttribute("type", "text/javascript");
            fileHref.setAttribute("src", sUrl);
        } else if (fileType == "css") {
            fileHref = document.createElement('link');
            fileHref.setAttribute("rel", "stylesheet");
            fileHref.setAttribute("type", "text/css");
            fileHref.setAttribute("href", sUrl);
        }
        if (fileHref !== undefined) {
            document.getElementsByTagName("head")[0].appendChild(fileHref);
            if (MiniSite.Browser.ie) {
                fileHref.onreadystatechange = function() {
                    if (this.readyState == 'loaded' || this.readyState == 'complete') {
                        if (fCallback != undefined) {
                            fCallback();
                        }
                    }
                };
            } else {
                fileHref.onload = function() {
                    if (fCallback != undefined) {
                        fCallback();
                    }
                };
            }
        }
    };
    
    //动态加载 CSS 文件
    MiniSite.JsLoader("/static/css/all.css", "css");
    MiniSite.JsLoader("/static/css/base.css", "css");
    MiniSite.JsLoader("/static/css/style.css", "css");
    //动态加载 JS 文件
    MiniSite.JsLoader("https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js", "js", function() {
        MiniSite.JsLoader("https://cdn.jsdelivr.net/npm/vue", "js");
        MiniSite.JsLoader("/static/js/bootstrap.min.js", "js");
        MiniSite.JsLoader("/static/js/bootstrap-table.min.js", "js", function() {
            MiniSite.JsLoader("https://cdn.bootcss.com/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js", "js");
            MiniSite.JsLoader("/static/js/tableExport.min.js", "js");
            MiniSite.JsLoader("https://cdn.bootcss.com/bootstrap-table/1.12.1/extensions/export/bootstrap-table-export.min.js", "js");
        });
        MiniSite.JsLoader("https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js", "js");
        MiniSite.JsLoader("/static/js/common.js", "js");
    });
  • 相关阅读:
    IIS 安装 pydio
    Windows环境配置Apache+Mysql+PHP
    Azure 云平台用 SQOOP 将 SQL server 2012 数据表导入 HIVE / HBASE
    PHP 启动 cURL模块以及启动失败的解决方案
    NodeJS 各websocket框架性能分析
    使用AndroidStudio编译NDK的方法及错误解决方案
    Ubuntu 系统下 mongodb 安装和配置
    Ubuntu安装nodeJS
    node.js应用Redis数据库
    Android平台相机接口的应用
  • 原文地址:https://www.cnblogs.com/ziyoublog/p/11685126.html
Copyright © 2011-2022 走看看