试图加载API和动态JS文件 [英] Trying to load an API and a JS file dynamically
问题描述
我试图动态加载使用Skyscanner API，但它似乎并没有工作。我试过各种可能的办法，我能想到的和所有它发生内容消失。
I am trying to load Skyscanner API dynamically but it doesn't seem to work. I tried every possible way I could think of and all it happens the content disappears.
我试过的console.log这给没有结果;我试图从Chrome的开发者工具和元素，而所有内容的CSS保持不变，仍然是内容消失（我认为这可以增加显示：在HTML /身体之类的无）。我尝试了所有谷歌的非同步的招数，再次空白页。我尝试了异步加载所有的JS与插件还是一样的结果。
I tried console.log which gives no results; I tried elements from chrome's developers tools and while all the content's css remains the same, still the content disappears (I thought it could be adding display:none on the html/body sort of). I tried all Google's asynch tricks, yet again blank page. I tried all js plugins for async loading with still the same results.
Skyscanner上的API文档差，而他们提供了一个回调不工作的方式谷歌的API的回调做的。
Skyscanner's API documentation is poor and while they offer a callback it doesn't work the way google's API's callback do.
例如： http://jsfiddle.net/7TWYC/
在头部分装载API示例： http://jsfiddle.net/s2HkR/
Example with loading API in head section: http://jsfiddle.net/s2HkR/
所以，我怎么能加载按钮点击或异步的API？如果没有文件中的HEAD部分之中。如果有一种方法prevent执行document.write使页面空白或任何其他方式。我不介意使用纯JS，jQuery的或PHP。
So how can I load the api on button click or async? Without the file being in the HEAD section. If there is a way to prevent the document.write to make the page blank or any other way. I wouldn't mind using plain js, jQuery or PHP.
编辑：
我已经设置赏金250 ontop 50的我不得不previously。
I've set a bounty to 250 ontop of the 50 I had previously.
奥兰多雷特回答关于如何使这种非同步API负荷虽然有些功能不能按日期选择等工作，我不能够设置一个造型非常接近的想法。
Orlando Leite answered a really close idea on how to make this asynch api load although some features doesn't work such as selecting dates and I am not able to set styling.
我要寻找一个答案，而我将能够使用所有的功能，因此，它的作品，如果它被装上加载它会工作。
I am looking for an answer of which I will be able to use all the features so that it works as it would work if it was loading on load.
下面是更新的小提琴被奥兰多： http://jsfiddle.net/cxysA/12/
Here is the updated fiddle by Orlando: http://jsfiddle.net/cxysA/12/
-
编辑2 ON的Gijs答：
的Gijs提到的两个环节上覆盖的document.write。这听起来一个真棒想法，但我认为这是不可能完成的任务，我想。
Gijs mentioned two links onto overwriting document.write. That sounds an awesome idea but I think it is not possible to accomplish what I am trying.
我用约翰Resig的方式prevent文件撰写这些都可以在这里找到：的 http://ejohn.org/blog/xhtml-documentwrite-and-adsense/
I used John's Resig way to prevent document.write of which can be found here: http://ejohn.org/blog/xhtml-documentwrite-and-adsense/
当我用这个方法，我successfuly加载API，但snippets.js文件没有加载在所有。
When I used this method, I load the API successfuly but the snippets.js file is not loading at all.
小提琴： http://jsfiddle.net/9HX7N/
推荐答案
有关问题的情况下，像这样，你可以覆盖文件撰写。哈克是地狱，但它的作品，你会得到决定，所有的内容去。如见。 此博文由John Resig的的。这忽略了IE浏览器，但有一点工作的把戏在IE工作为好，例如见。 此博文。
For problematic cases like this, you can just overwrite document.write. Hacky as hell, but it works and you get to decide where all the content goes. See eg. this blogpost by John Resig. This ignores IE, but with a bit of work the trick works in IE as well, see eg. this blogpost.
所以，我建议重写文件撰写用自己的功能，批量达输出在必要时，并把它放在你喜欢的地方（例如，在一个div你的＆LT的底部，身体GT; ）。这应该prevent从的摧毁你的页面内容的脚本。
So, I'd suggest overwriting document.write with your own function, batch up the output where necessary, and put it where you like (eg. in a div at the bottom of your <body>'). That should prevent the script from nuking your page's content.
编辑：好了，所以我不得不/花了一些时间来考虑这个脚本。对于未来的参考，使用像 http://jsbeautifier.org/ 调查第三方脚本。更容易阅读的方式。幸运的是，几乎没有任何混淆/缩小可言的，所以你必须为他们的API文档补充（这点我是无法找到，顺便说一句 - 我只找到'code巫师'，这我没有利息）。
OK, so I had/took some time to look into this script. For future reference, use something like http://jsbeautifier.org/ to investigate third-party scripts. Much easier to read that way. Fortunately, there is barely any obfuscation/minification at all, and so you have a supplement for their API documentation (which I was unable to find, by the way -- I only found 'code wizards', which I had no interest in).
下面是一个几乎工作的例子： http://jsfiddle.net/a8q2s/1/
Here's an almost-working example: http://jsfiddle.net/a8q2s/1/
下面是我采取的步骤：
- 覆盖
文件撰写。这需要您加载初始脚本之前发生的。您的替换功能应在其code的字符串追加到DOM。不要叫老文件撰写，也只会让你的错误，你想要什么反正不会做。在这种情况下，你是幸运的，因为所有的内容是在一个单一的文件撰写调用（检查初始脚本的来源）。如果不是这种情况下，你必须批量一切，直到HTML他们会给予你是有效的和/或你确信没有别的来了。 - 加载点击按钮与jQuery的
$。getScript加入或等值的初始脚本。传递一个回调函数（我用的清晰度命名函数引用，但是如果你preFER你可以内联的话）。 - 告诉Skyscanner上加载模块。
- override
document.write. This needs to happen before you load the initial script. Your replacement function should append their string of code into the DOM. Don't call the olddocument.write, that'll just get you errors and won't do what you want anyway. In this case you're lucky because all the content is in a singledocument.writecall (check the source of the initial script). If this weren't the case, you'd have to batch everything up until the HTML they'd given you was valid and/or you were sure there was nothing else coming. - load the initial script on the button click with jQuery's
$.getScriptor equivalent. Pass a callback function (I used a named function reference for clarity, but you can inline it if you prefer). - Tell Skyscanner to load the module.
编辑＃2：哈，他们有一个API获取一个回调，一旦他们的脚本加载（ skyscanner.loadAndWait ）。使用的作品：
Edit #2: Hah, they have an API (skyscanner.loadAndWait) for getting a callback once their script has loaded. Using that works:
（注意：这似乎仍然使用超时循环内部）
(note: this still seems to use a timeout loop internally)
这篇关于试图加载API和动态JS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
