动态加载JavaScript

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

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

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

您可能希望使用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和动画库的地方,以及如果用户从未点击选项卡,该怎么办? 输入按需加载模式。 您可以创建一个require()函数或方法,该函数或方法将加载要加载的脚本的文件名,并在加载其他脚本时执行回调函数。

require()函数可以像这样使用:

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

让我们看看如何实现这样的function。 请求附加脚本很简单。 您只需遵循动态元素模式即可。 由于浏览器的不同,弄清楚加载脚本的时间有点棘手:

 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模式,Stoyan Stefanov(O’Reilly)。 版权所有2010 Yahoo!,Inc.,9780596806750。“

你只需通过javascript生成脚本标记并将其添加到doc。

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

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

   

我使用了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 } });