在页面中动态添加javascript文件的方法 [英] Ways to add javascript files dynamically in a page

问题描述

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

I have seen Scriptaculous.js file to include its required javascript files dynamically. Is there any better approach to include javascript dynamically.

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

For example, I would like to include my js files like,

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

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

How can I do that in an efficient manner?

推荐答案

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

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:

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

我希望全部使用

这篇关于在页面中动态添加javascript文件的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！