动态加载JavaScript

Load JavaScript dynamically

本文关键字：JavaScript 加载 动态      更新时间：2023-09-26

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

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

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

您可能想使用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
});

使用按需加载加载策略

按需加载

前面的模式在页面加载后无条件加载额外的JavaScript，假设代码很可能是需要的。但是我们能不能做得更好，只加载部分代码和真正需要的部分?假设页面上有一个带有不同选项卡的边栏。单击选项卡将生成一个XHR请求获取内容、更新选项卡内容并使更新淡出动画化这颜色。如果这是页面上唯一需要XHR和动画的地方呢库，如果用户从不点击选项卡怎么办?输入load-on-demand模式。您可以创建一个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);
}

" JavaScript Patterns，作者:Stoyan Stefanov(O ' reilly)。雅虎版权所有

您只需通过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>");
    }
}

我想你在找这个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>

我使用了Tangim响应，但之后发现使用jquery的html()函数更方便。当我们对html+javascript文件发出ajax请求时，我们做如下操作:

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