博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JQuery 加载 CSS、JS 文件
阅读量:5262 次
发布时间:2019-06-14

本文共 1878 字,大约阅读时间需要 6 分钟。

JS 方式加载 CSS、JS 文件:

//加载 css 文件function includeCss(filename) {    var head = document.getElementsByTagName('head')[0];    var link = document.createElement('link');    link.href = filename;    link.rel = 'stylesheet';    link.type = 'text/css';    head.appendChild(link)}//加载 js 文件function includeJs(filename) {    var head = document.getElementsByTagName('head')[0];    var script = document.createElement('script');    script.src = filename;    script.type = 'text/javascript';    head.appendChild(script)}

上面这种方式很简单,但也会出现一些问题,比如加载 JS 文件之后,需要执行 JS 内的方法,这时候偶尔会找不到方法执行,因为可能加载 JS 文件的时候,网络卡掉了,所以,需要换种方式加载,必须在加载 JS 文件完成之后,执行 JS 内部方法。

JQuery 加载 CSS 文件:

$("head").append("
");var css = $("head").children(":last");css.attr({ rel: "stylesheet", type: "text/css", href: "address_of_your_css"});

Jquery 加载 JS 文件,有两种方式:

$.ajax({    url: "js file",    dataType: "script",    cache: true,    success: function () {        //todo    }});$.getScript('js file', function () {    //todo});

上面两种方式都可以,并且都是在加载 JS 文件之后,再执行 JS 内部的方法(不会出现找不到方法执行错误),第二种会更简单些。

那如果我们需要加载多个 JS 文件呢?

$.when(    $.getScript( "/mypath/myscript1.js" ),    $.getScript( "/mypath/myscript2.js" ),    $.getScript( "/mypath/myscript3.js" ),    $.Deferred(function(deferred){        $(deferred.resolve);    })).done(function(){    //place your code here, the scripts are all loaded});

如果需要多次调用,也可以抽离出方法:

//定义$.getMultiScripts = function(arr, path) {    var _arr = $.map(arr, function(scr) {        return $.getScript( (path||"") + scr );    });    _arr.push($.Deferred(function( deferred ){        $( deferred.resolve );    }));    return $.when.apply($, _arr);}//调用var script_arr = [    'myscript1.js',     'myscript2.js',     'myscript3.js'];$.getMultiScripts(script_arr, '/mypath/').done(function() {    // all scripts loaded});

参考资料:

转载于:https://www.cnblogs.com/xishuai/p/jquery-load-css-and-js-file.html

你可能感兴趣的文章
CF461B Appleman and Tree
查看>>
CF219D Choosing Capital for Treeland
查看>>
[算法模版]AC自动机
查看>>
CF1207G Indie Album
查看>>
杂七杂八的小笔记本
查看>>
51Nod1709 复杂度分析
查看>>
[算法模版]树形背包
查看>>
51Nod1353 树
查看>>
[算法模板]SOS DP
查看>>
CF1208F Bits And Pieces
查看>>
CF1215E Marbles
查看>>
手把手教你写一个windows服务 【基于.net】 附实用小工具{注册服务/开启服务/停止服务/删除服务}...
查看>>
.net Core 图片验证码 基于SkiaSharp实现
查看>>
fish redux 个人理解
查看>>
java 笔记一些
查看>>
一些识别CMS的经验方法总结
查看>>
用Java实现一些常见的问题
查看>>
第1章 Python基础之字符编码
查看>>
高性能网站建设学习笔记
查看>>
什么是ORM
查看>>