Dynamically loading an external JavaScript or CSS file
原文: Dynamically loading an external JavaScript or CSS file
通过javascript动态加载css文件和javascript文件,主要是通过javascript在HTML的Head标签中间插入下面的代码,达到引入css和javascript效果
<link href="SNJStyles.css" type="text/css" rel="stylesheet">
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
实现代码:
1 function loadjscssfile(filename, filetype){ 2 if (filetype=="js"){ //if filename is a external JavaScript file 3 var fileref=document.createElement('script') 4 fileref.setAttribute("type","text/javascript") 5 fileref.setAttribute("src", filename) 6 } 7 else if (filetype=="css"){ //if filename is an external CSS file 8 var fileref=document.createElement("link") 9 fileref.setAttribute("rel", "stylesheet") 10 fileref.setAttribute("type", "text/css") 11 fileref.setAttribute("href", filename) 12 } 13 if (typeof fileref!="undefined") 14 document.getElementsByTagName("head")[0].appendChild(fileref) 15 } 16 17 // 使用例子 18 loadjscssfile("myscript.js", "js") //dynamically load and add this .js file 19 loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file 20 loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file