动态加载 JavaScript [重复]答案

【问题标题】：Load JavaScript dynamically [duplicate]动态加载 JavaScript [重复]
【发布时间】：2011-11-09 17:41:02
【问题描述】：

我有一个网页和一个嵌入了 Google 地图的画布。我在这个网站上使用 jQuery。

我只想在用户点击“显示地图”时加载 Google Maps API。此外，我想从标题中删除谷歌地图的整个加载，以提高我的页面性能。

所以我需要动态加载 JavaScript。我可以使用什么 JavaScript 函数？

【问题讨论】：

你可能想检查这个问题：stackoverflow.com/questions/310583/…
@Igor 既然他已经在使用 jQuery，使用 $.getScript 应该可以消除麻烦。
@Arnaud 是的，你可能是对的。

标签： javascript jquery

【解决方案1】：

您可能需要使用jQuery.getScript，它可以帮助您在需要时加载 Google Maps API javascript 文件。

示例：

$.getScript('http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true', function(data, textStatus){
   console.log(textStatus, data);
   // do whatever you want
});

【讨论】：

请注意，在脚本加载之后，在执行之前调用成功回调。

【解决方案2】：

使用按需加载加载策略

按需加载

之前的模式在页面加载后无条件加载额外的 JavaScript，假设可能需要该代码。但是我们能做得更好，只加载部分代码和只有真正需要的部分？想象一下，您在页面上有一个带有不同选项卡的侧边栏。单击选项卡会生成一个 XHR 请求获取内容，更新选项卡内容，并动画更新淡入淡出颜色。 如果这是页面上唯一需要 XHR 和动画的地方怎么办库，如果用户从不点击标签怎么办？ 输入按需加载模式。您可以创建一个 require() 函数或方法获取要加载的脚本的文件名和要执行的回调函数附加脚本已加载。

require() 函数可以这样使用：

require("extra.js", function () {
   functionDefinedInExtraJS();
});

让我们看看如何实现这样的功能。请求附加脚本是直截了当。您只需遵循动态元素模式。搞清楚由于浏览器的差异，加载脚本的时间有点棘手：

function require(file, callback) {
   var script = document.getElementsByTagName('script')[0],
   newjs = document.createElement('script');

  // IE
  newjs.onreadystatechange = function () {
     if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') {
        newjs.onreadystatechange = null;
        callback();
     }
  };
  // others
  newjs.onload = function () {
     callback();
  }; 
  newjs.src = file;
  script.parentNode.insertBefore(newjs, script);
}

【讨论】：

在尝试从本地 (file:///) 上下文动态加载本地文件时，这绝对是救命稻草……非常感谢 :)

【解决方案3】：

您只需通过 javascript 生成脚本标记并将其添加到文档中。

function AddScriptTag(src) {
    var node = document.getElementsByTagName("head")[0] || document.body;
    if(node){
        var script = document.createElement("script");
        script.type="text/javascript";
        script.src=src
        node.appendChild(script);
    } else {
        document.write("<script src='"+src+"' type='text/javascript'></script>");
    }
}

【讨论】：

你确定document.getElementsByTagName 足够跨浏览器吗？
然而，根据quirksmode.org/dom/w3c_core.html#t12

【解决方案4】：

我想你正在寻找这个http://unixpapa.com/js/dyna.html

<input type="button" onclick="helper()" value="Helper">

   <script language="JavaScript">
   function helper()
   {
      var head= document.getElementsByTagName('head')[0];
      var script= document.createElement('script');
      script.type= 'text/javascript';
      script.src= 'your_script_url';
      head.appendChild(script);
   }
   </script>

【讨论】：

【解决方案5】：

我使用了 Tangim 响应，但后来发现更容易使用 jquery html() 函数。当我们向具有 html+javascript 的 html 文件发出 ajax 请求时，我们执行以下操作：

$.ajax({
    url:'file.html',
    success:function(data){
       $("#id_div").html(data); //Here automatically load script if html contain
    }
});

【讨论】：