Question

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

我想仅在用户点击“向我显示地图”时加载Google Maps API。此外，我想从标题中删除整个Google地图的加载，以提高我的网页效果。

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

Answer 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 });

Answer 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);
}

Answer 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>");
    }
}

Answer 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>

Answer 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
    }
});

动态加载JavaScript

5 个答案:

按需加载