在页面中动态添加javascript文件的方法

Question

我已经看到Scriptaculous.js文件动态包含其所需的javascript文件.有没有更好的方法来动态包含JavaScript.

例如,我想包括我的js文件,如,

<script src="single.js?files=first.js,second.js,third.js..."></script>

我怎样才能以有效的方式做到这一点？

Answer 1

要动态加载.js或.css文件,简而言之,这意味着使用DOM方法首先创建一个时髦的新"SCRIPT"或"LINK"元素,为其分配适当的属性,最后使用element.appendChild()将元素添加到文档树中的所需位置.这听起来比实际更加花哨.让我们看看这一切是如何结合在一起的:

function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file

我希望它的使用完整

Answer 2

您可以使用该jQuery.getScript()功能......我认为使用此功能可以更轻松地包含JavaScript .js文件.

这是参考.

Answer 3

要动态添加新的 javascript 文件：

function includeJS(jsFile) {
    $('head').append($('<script>').attr('type', 'text/javascript').attr('src', jsFile));
}


// Pick a JS to load
if ($.browser.msie) {
    includeJS('first.js');
} else {
    includeJS('second.js');
}
includeJS('third.js');