网页中SkyScanner Widget的问题

时间:2014-03-02 23:33:47

标签: javascript api widget skyscanner

我按照此示例在我的网站上添加了一个SkyScanner小部件:

http://business.skyscanner.net/portal/en-GB/Documentation/Widgets

出于某种原因,我只得到一个空的div - 这可能与钥匙有关吗?当我点击我从SkyScanner获取的激活链接获取小部件密钥时,我得到了一个页面,上面写着以下内容:

  

描述:服务器上发生了应用程序错误。此应用程序的当前自定义错误设置可防止远程查看应用程序错误的详细信息(出于安全原因)。但是,它可以由运行在本地服务器计算机上的浏览器查看。

     

详细信息:要启用此特定错误消息的详细信息   在远程计算机上可以查看,请在其中创建标记   一个位于根目录下的“web.config”配置文件   当前的网络应用。这个标签应该有它的   “mode”属性设置为“Off”。

我使用以下代码创建了一个web.config文件:

<!-- Web.Config Configuration File -->

<configuration>
    <system.web>
        <customErrors mode="Off"/>
    </system.web>
</configuration>

我看过Chrome上的'inspect element'并得到错误

  

未捕获的TypeError:对象#没有方法'write'   ?api.ashx键= [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);

1 个答案:

答案 0 :(得分:0)

Skyscanner B2B支持工程师。你还有这个问题吗?

如需最快的回复,请在此与我们联系:http://business.skyscanner.net/portal/en-GB/Home/Contact

要检查的第一件事是文件在Web服务器上(localhost很好),而不是从桌面(或一般的本地磁盘)加载。这是因为一些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>