动态加载js和css的jquery plugin_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

动态加载js和css的jquery plugin_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:58 AM

jqueryjsplugin載入動態

一个简单的动态加载js和css的jquery代码，用于在生成页面时通过js函数加载一些共通的js和css文件。

Java代码

//how to use the function below:
//$.include('file/ajaxa.js');$.include('file/ajaxa.css');
//or $.includePath = 'file/';$.include(['ajaxa.js','ajaxa.css']);(only if .js and .css files are in the same directory)
$.extend({
includePath: '',
include: function(file)
{
var files = typeof file == "string" ? [file] : file;
for (var i = 0; i
{
var name = files[i].replace(/^\s|\s$/g, "");
var att = name.split('.');
var ext = att[att.length - 1].toLowerCase();
var isCSS = ext == "css";
var tag = isCSS ? "link" : "script";
var attr = isCSS ? " type='text/css' rel='stylesheet' " : " type='text/javascript' ";
var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'";
if ($(tag + "[" + link + "]").length == 0) $("head").prepend("" + tag + ">");
}
}
});
$.include('../js/jquery-ui-1.8.21.custom.min.js');
$.include('../css/black-tie/jquery-ui-1.8.21.custom.css');

将该函数写入一个common.js文件中，在html中加载该common.js文件，就可以达到目的。该js函数出自以下链接：
http://www.cnblogs.com/chenjinfa/archive/2009/03/17/1414178.html
注意：
1.在html5中，<script>标签已经不支持language属性了，所以我删除了： Java代码 <ol> <li>var attr = isCSS ? " type='text/css' rel='stylesheet' " : " language='javascript' type='text/javascript' "; 中的language='javascript' 2.原作者在写入js和css标签时，用的是： Java代码 <ol> <li>document.write("<" + tag + attr + link + "></" + tag + ">"); 但是经过实践，发现document.write（）方法会在写入前清除原页面的所有内容，也就相当于覆盖的意思，这样明显达不到我的需要，我需要在加载页面时动态的向页面导入共通的js和css，而不能清除我原页面的其他任何内容，所以查了下api，我改用了： Java代码 <ol> <li>$("head").prepend("<" + tag + attr + link + "></" + tag + ">"); 这个方法，$("head").prepend（）方法的作用是在<head>标签的最前端追加写入内容。 最后，再补充一个方法，也是通过共通js来实现，应该比上面这个方法更容易理解： Java代码 <ol> <li>Dynamically loading external JavaScript and CSS files <li> <li>To load a .js or .css file dynamically, in a nutshell, it means using DOM methods to first create a swanky new "SCRIPT" or "LINK" element, assign it the appropriate attributes, and finally, use element.appendChild() to add the element to the desired location within the document tree. It sounds a lot more fancy than it really is. Lets see how it all comes together: <li> <li>function loadjscssfile(filename, filetype){ <li>if (filetype=="js"){ //if filename is a external JavaScript file <li> var fileref=document.createElement('script') <li> fileref.setAttribute("type","text/javascript") <li> fileref.setAttribute("src", filename) <li>} <li>else if (filetype=="css"){ //if filename is an external CSS file <li> var fileref=document.createElement("link") <li> fileref.setAttribute("rel", "stylesheet") <li> fileref.setAttribute("type", "text/css") <li> fileref.setAttribute("href", filename) <li>} <li>if (typeof fileref!="undefined") <li> document.getElementsByTagName("head")[0].appendChild(fileref) <li>} <li> <li>loadjscssfile("myscript.js", "js") //dynamically load and add this .js file <li>loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file <li>loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file <li> </script>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

See all articles