我相信你想要的就是它:
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,在调用加载函数后创建 SearchPanelControl。但最后,sn -p 绘制在主文档中。这确实是一个奇怪的解决方法,但它确实有效。
唯一的限制是,您需要一个 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 在加载 sn-p 时加载和回调。加载后创建所需的 sn-p 并设置超时后,因为我们不知道 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 );
}