我按照此示例在我的网站上包含 SkyScanner 小部件:
http://business.skyscanner.net/portal/en-GB/Documentation/Widgets
出于某种原因，我只得到一个空 div - 这可能与 key 有关吗？当我单击从 SkyScanner 获得的小部件 key 的激活链接时，我看到一个页面，内容如下:
Description: An application error occurred on the server. The current custom error settings for this application prevent the details of the application error from being viewed remotely (for security reasons). It could, however, be viewed by browsers running on the local server machine.
Details: To enable the details of this specific error message to be viewable on remote machines, please create a tag within a "web.config" configuration file located in the root directory of the current web application. This tag should then have its "mode" attribute set to "Off".
我使用以下代码创建了一个 web.config 文件:
<!-- Web.Config Configuration File -->
<configuration>
<system.web>
<customErrors mode="Off"/>
</system.web>
</configuration>
我查看了 Chrome 上的“检查元素”并收到错误
Uncaught TypeError: Object # has no method 'write' api.ashx?key=[KEY]:1
这是 JS:
var API_KEY = 'b7290ac3-1f9f-4575-88a7-89fed0c61f7f',
MAIN_URL = 'http://api.skyscanner.net/api.ashx?key=' + API_KEY;
function main(){
console.log('loaded module');
var snippet = new skyscanner.snippets.SearchPanelControl();
snippet.setCurrency('GBP');
snippet.setDeparture('uk');
snippet.draw(document.getElementById('snippet_searchpanel'));
};
function newWrite(str) {
$(str).appendTo('body');
}
var oldWrite = document.write;
document.write = newWrite;
function onMainSkyscannerScriptLoad(e) {
console.log('loaded main script');
skyscanner.loadAndWait('snippets', '1', {'nocss' : true}, main);
}
$('button').click(function() {
console.log('getting main script');
$.getScript(MAIN_URL, onMainSkyscannerScriptLoad);
});
我还用它来个性化小部件:
skyscanner.load("snippets","2");
function main(){
var snippet = new skyscanner.snippets.SearchPanelControl();
snippet.setShape("box300x250");
snippet.setCulture("en-GB");
snippet.setCurrency("USD");
snippet.setColourScheme("classicbluelight");
snippet.setProduct("flights","1");
snippet.setProduct("hotels","2");
snippet.setProduct("carhire","3");
snippet.draw(document.getElementById("snippet_searchpanel"));
}
skyscanner.setOnLoadCallback(main);
最佳答案
这里是 Skyscanner B2B 支持工程师。您还有这个问题吗？
为了获得最快的回复，请在此处联系我们:http://business.skyscanner.net/portal/en-GB/Home/Contact
首先要检查的是该文件是否位于 Web 服务器上(本地主机即可)，而不是从桌面(或一般本地磁盘)加载。这是因为某些 Skyscanner JS 代码使用//api.skyscanner.net 等 URL 查找其他文件。换句话说，将文件保存到桌面并从那里打开它将不起作用(将显示为空 div)。这是绘制小部件的最基本示例。您可以尝试将其放入文件中并通过服务器访问它吗？如果它有效，我们可以在它的基础上进行构建:)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<script type="text/javascript" src="//api.skyscanner.net/api.ashx?key=b7290ac3-1f9f-4575-88a7-89fed0c61f7f"></script>
<script type="text/javascript">
skyscanner.load("snippets","2");
function main(){
var snippet = new skyscanner.snippets.SearchPanelControl();
snippet.setShape("box300x250");
snippet.setCulture("en-GB");
snippet.setCurrency("USD");
snippet.setProduct("flights","1");
snippet.setProduct("hotels","2");
snippet.setProduct("carhire","3");
snippet.draw(document.getElementById("snippet_searchpanel"));
}
skyscanner.setOnLoadCallback(main);
</script>
</head>
<body>
<div id="snippet_searchpanel" style="width: auto; height:auto;"></div>
</body>
</html>
关于javascript - 网页中 SkyScanner Widget 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22135188/