javascript - 尝试动态加载 API 和 JS 文件

Question

我正在尝试动态加载 Skyscanner API，但它似乎不起作用。我尝试了我能想到的所有可能的方法，结果所有内容都消失了。

我尝试了 console.log 但没有给出任何结果；我尝试了 chrome 的开发人员工具中的元素，虽然所有内容的 css 都保持不变，但内容仍然消失了(我认为它可能会在 html/body 之类的地方添加 display:none )。我尝试了所有 Google 的异步技巧，但还是空白页。我尝试了所有用于异步加载的 js 插件，结果仍然相同。

Skyscanner 的 API 文档很差，虽然他们提供了回调，但它不像谷歌 API 的回调那样工作。

示例:http://jsfiddle.net/7TWYC/

在头部部分加载 API 的示例:http://jsfiddle.net/s2HkR/

那么如何在按钮单击或异步时加载 api？文件不在 HEAD 部分。如果有办法防止 document.write 使页面空白或任何其他方式。我不介意使用纯 js、jQuery 或 PHP。

编辑:

我已将赏金设置为 250，高于之前的 50。

Orlando Leite 回答了一个关于如何进行异步 API 加载的非常接近的想法，尽管某些功能不起作用，例如选择日期，而且我无法设置样式。

我正在寻找一个答案，我将能够使用它的所有功能，以便它像在加载时一样工作。

这是 Orlando 更新的 fiddle :http://jsfiddle.net/cxysA/12/

-

在 Gijs 上编辑 2 答案:

Gijs 提到了覆盖 document.write 的两个链接。这听起来很棒，但我认为不可能完成我正在尝试的事情。

我使用 John 的 Resig 方法来防止 document.write 可以在这里找到:http://ejohn.org/blog/xhtml-documentwrite-and-adsense/

当我使用此方法时，我成功加载了 API，但根本没有加载 snippets.js 文件。

fiddle :http://jsfiddle.net/9HX7N/

Answer 1

我相信你想要的是:

function loadSkyscanner()
{
    function loaded()
    {
        t.skyscanner.load('snippets', '1', {'nocss' : true});

        var snippet = new t.skyscanner.snippets.SearchPanelControl();
        snippet.setCurrency('GBP');
        snippet.setDeparture('uk');
        snippet.draw(document.getElementById('snippet_searchpanel'));
    }

    var t = document.getElementById('sky_loader').contentWindow;
    var head = t.document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.onreadystatechange= function() {
        if(this.readyState == 'complete') loaded();
    }
    script.onload= loaded;
    script.src= 'http://api.skyscanner.net/api.ashx?key=PUT_HERE_YOUR_SKYSCANNER_API_KEY';
    head.appendChild(script);
}

$("button").click(function(e)
{
    loadSkyscanner();
});

在 iframe#sky_loader 中加载 skyscanner，调用 loaded 函数后创建 SearchPanelControl。但最后，代码片段绘制在主文档中。这确实是一个奇怪的解决方法，但它确实有效。

唯一的限制是，您需要一个 iframe。但您可以使用 display:none 隐藏它。

A working example

编辑

对不起，我没看到。现在我们可以看到 skyscanner API 有多糟糕了。它放置两个 div 来进行自动完成，但不是相对于您调用绘制的元素，而是相对于文档。当脚本加载到 iframe 中时，document 就是 iframe 文档。

有一个解决方案，但我不推荐，真的是一个解决方法:

    function loadSkyscanner()
{
    var t;
    this.skyscanner;
    var iframe = $("<iframe id=\"sky_loader\" src=\"http://fiddle.jshell.net/orlleite/2TqDu/6/show/\"></iframe>");

    function realWorkaround()
    {
        var tbody = t.document.getElementsByTagName("body")[0];
        var body = document.getElementsByTagName("body")[0];

        while( tbody.children.length != 0 )
        {
            var temp = tbody.children[0];
            tbody.removeChild( temp );
            body.appendChild( temp );
        }
    }

    function snippetLoaded()
    {
        skyscanner = t.skyscanner;

        var snippet = new skyscanner.snippets.SearchPanelControl();
        snippet.setCurrency('GBP');
        snippet.setDeparture('uk');
        snippet.draw(document.getElementById('snippet_searchpanel'));

        setTimeout( realWorkaround, 2000 );
    }

    var loaded = function()
    {
        console.log( "loaded" );
        t = document.getElementById('sky_loader').contentWindow;

        t.onLoadSnippets( snippetLoaded );
    }

    $("body").append(iframe);
    iframe.load(loaded);
}

$("button").click(function(e)
{
    loadSkyscanner();
});

加载带有另一个 html 的 iframe，该 html 在加载代码段时加载和回调。加载后在所需位置创建代码段并设置超时，因为我们无法知道 SearchPanelControl 何时加载。此 realWorkaround 将自动完成的 div 移动到主文档。

You can see a work example here

The iframe loaded is this

编辑

修复了您发现的错误并更新了链接。

for 循环已经消失并添加了一段时间，现在工作得更好了。

    while( tbody.children.length != 0 )
    {
        var temp = tbody.children[0];
        tbody.removeChild( temp );
        body.appendChild( temp );
    }