Question

我确信这个问题有不同的方法，我可以想到一些。但我想听听其他人对此的看法。更具体地说，我已经构建了一个小部件，允许用户从谷歌地图中选择他们的位置。此小部件按需显示，并且可能会在其放置的页面的每10次使用中使用。加载此窗口小部件（google maps js api）的依赖项的最简单方法是在页面中放置一个脚本标记。但这会使浏览器请求加载每个页面上的脚本。我正在寻找一种方法，只有当用户需要显示小部件时，才能使浏览器请求该脚本。

Answer 1

function loadJSInclude(scriptPath, callback)
{
    var scriptNode = document.createElement('SCRIPT');
    scriptNode.type = 'text/javascript';
    scriptNode.src = scriptPath;

    var headNode = document.getElementsByTagName('HEAD');
    if (headNode[0] != null)
        headNode[0].appendChild(scriptNode);

    if (callback != null)    
    {
        scriptNode.onreadystagechange = callback;            
        scriptNode.onload = callback;
    }
}

使用（我使用swfObject作为例子）：

var callbackMethod = function ()
{
    // Code to do after loading swfObject
}

// Include SWFObject if its needed
if (typeof(SWFObject) == 'undefined')    
    loadJSInclude('/js/swfObject.js', callbackMethod);
else
    callbackMethod();

Answer 2

您可能需要查看jsloader：http://www.jsloader.com/

Answer 3

盖亚阿贾克斯这样做（我知道自从我实施了它 - 我是最初的创始人）而且他们是GPL。因此，除非你害怕他们会起诉你（他们现在就通过诉讼来解雇我），你可能想看看他们是如何做到这一点的。基本技术是在需要脚本时使用DOM注入脚本标记。虽然在完成加载之前必须注意不要引用此文件中的内容（这是异步发生的）

该问题的解决方案（一种解决方案）是在文件底部添加一个变量，并使用递归的setTimeout调用来检查变量是否已定义，并根据正在加载的文件延迟执行代码，直到那个“JS文件的底部”变量被定义了......

我们实际上还通过将文件名的散列值附加到页面上的隐藏字段来跟踪包含哪些文件。这意味着我们从未结束过多次包含同一个文件......

事实上非常漂亮......

Answer 4

您可能想看看房地产网站上的真实DEMO。

在演示页面上，只需点击链接[Xemảnđồ]即可查看按需加载的地图。仅在单击链接时才加载地图，而不是在页面加载时，这样可以减少页面下载时间。

Answer 5

您可以通过向DOM树添加<script src="...">标记来动态加载脚本。

Answer 6

Google AJAX API为Google的JavaScript API提供动态加载。文档中有loading the Maps JS on-demand的示例：

function mapsLoaded() {
  var map = new google.maps.Map2(document.getElementById("map"));
  map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
}

function loadMaps() {
  google.load("maps", "2", {"callback" : mapsLoaded});
}

根据需要加载javascript依赖项

6 个答案: