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

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

javascript jquery

在页面中动态添加javascript文件的方法,javascript,jquery,prototypejs,scriptaculous,Javascript,Jquery,Prototypejs,Scriptaculous,我已经看到Scriptaculous.js文件动态地包含其所需的javascript文件。有没有更好的方法来动态地包含javascript 例如，我想包括我的js文件，比如 <script src="single.js?files=first.js,second.js,third.js..."></script> 如何高效地执行此操作？要动态添加新的javascript文件，请执行以下操作： function includeJS(jsFile) { $('h

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

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

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

如何高效地执行此操作？

要动态添加新的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');

函数includeJS（jsFile）{
$（'head'）.append（$（''）.attr（'type'，'text/javascript'）.attr（'src'，jsFile））；
}
//选择要加载的JS
如果（$.browser.msie）{
includeJS（'first.js'）；
}否则{
includeJS（'second.js'）；
}
includeJS（'third.js'）；

您可以使用

jQuery.getScript（）

函数。。。我认为这会让您更容易使用JavaScript

.js

文件

是参考资料。

<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <script src="script/jquery.min.js"></script>
    <script src="script/master_load.js"></script>
    <script>
        load_master_css();
        load_master_js();
    </script>
</head>

编辑：不要使用这种方法-我十年前写过这个答案！把它留在这里纯粹是为了子孙后代

有许多不同的方式，但Google加载其他脚本的方式如下：

function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
}

函数getScript（src）{ 文件。写（“”）； } 这是直接从谷歌地图加载器

将脚本标记直接写入文档是最简单、最有效的方法。

要动态加载.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

我希望它能被充分利用，我已经看到了scriptaculous加载程序的功能。它所做的是遍历文档中的所有脚本标记，以找到自己加载的脚本，例如：

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

然后，它解析src属性中使用的querystring，并为每个脚本文件动态创建额外的脚本标记。同时，它还解析基本脚本的路径（

/path/to/single.js

），并使用相同的路径加载依赖项文件（例如

/path/to/first.js

）

您可以像这样创建自己的脚本加载程序。在vanilla javascript中，您可以使用以下函数：

--查找所有脚本
--查找src/href/type属性
--创建脚本元素
--附加到头部/身体

Anand Thangappan发布了一个使用这些函数的解决方案。如果您使用的是jQuery或MooTools等框架，那么它们都提供了自己的动态加载JsvaScript的实现

最后，有一个服务器端解决方案可以解决您的问题。查看--将多个CSS或JavaScript文件合并并缩小到一个下载中。

我们可以快速扩展此功能，以便在添加脚本后可以执行回调

function loadjscssfile(filename, filetype, callback){
    if (typeof fileref!="undefined") {
        document.getElementsByTagName("head")[0].appendChild(fileref);
        callback();
    }
}

接下来，我发现谷歌现在是如何通过分析实现这一点的：

下面是同一代码的更通用版本：

(function() {
    var s = document.createElement('script'); // Create a script element
    s.type = "text/javascript";               // optional in html5
    s.async = true;                           // asynchronous? true/false
    s.src = "//example.com/your_script.js"; 
    var fs = document.getElementsByTagName('script')[0];  // Get the first script
    fs.parentNode.insertBefore(s, fs);
})();

document.getElementsByTagName（“头”）[0].appendChild（fileref‌)不起作用。ready（）可以内联使用。$（“head”）.append（fileref）；
对我来说非常有用，尽管它需要jquery.min.js
内联引用
<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <script src="script/jquery.min.js"></script>
    <script src="script/master_load.js"></script>
    <script>
        load_master_css();
        load_master_js();
    </script>
</head>

创建脚本标记，设置URL，将其添加到文档：
let script=document.createElement（“脚本”）；
script.src=”https://example.com/your_script.js"; 
document.body.appendChild（脚本）；

就这样。对于这样一个简单的任务，这页上有太多过于复杂的答案
如果您使用的是现代JavaScript，那么可以使用动态导入，其语法类似于await import（…）
。这超出了这个答案的范围，但你可以阅读更多相关内容。
为什么投反对票？有什么问题吗？@Hoque-看起来有人正在浏览问题页面，对所有问题都投反对票；一行至少有5个问题的分数为-1或更低。我猜主持人可以验证这一点……同意，我也很好奇w发生了什么事。似乎有些垃圾邮件发送者玩得很开心。所以…+1来补偿。我不知道这里有三个Arswer，但我只得到了两个。发生了什么事？@Hoque-一个是垃圾邮件并被删除。我相信答案计数被缓存了，或者可能只是包括删除的答案（即一个bug）。我想这就是我将用于所有网站链接的文本。谷歌本身不再推荐：）例如，他们已经改变了向网站添加谷歌分析代码的推荐方式。当谷歌的所有API都以这种方式加载时，你能提供一个链接来支持吗，即使你这样做了：。阅读介绍性段落，其中说我们建议您使用默认跟踪代码段，如跟踪站点中所述。旧脚本（更准确地说是脚本加载器）使用document.write
，更新后的脚本使用document.createElement
。这是另一本有趣的读物：有趣的读物。只有以这种方式异步加载脚本时，您才能真正获益，如果使用回调，这是很好的。我想这取决于你是否需要按幕布顺序加载脚本。哈哈，谢谢你在回答问题三年半后投下的反对票——毫不奇怪，自从我写下这个答案以来，事情已经发生了变化。非常感谢你的努力。这就像一个接一个地添加脚本。浏览器支持什么？您需要添加document.body.appendChild（fileref）；要使其在浏览器中工作，请注意文件可能无法按照您在.document.getElementsByTagName（“head”）[0]中调用它们的确切顺序加载（和运行）。如果您有一些文档，则appendChild（fileref）无法工作。ready（）可以内联工作$（“标题”）。附加（文件参考）；虽然它需要jquery.min.js内联引用，但对我来说效果很好。如果您加载了jquery，只需使用jquery.getScript（）。我怀疑这是否有效。。。您传递了未使用的filename
和filetype
以及未声明的fileref
，抱歉