Home/ Questions/Q 6938109
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T12:27:02+00:00

I am trying to load Skyscanner API dynamically but it doesn’t seem to work.

  • 0

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.

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’s API documentation is poor and while they offer a callback it doesn’t work the way google’s API’s callback do.

Example: http://jsfiddle.net/7TWYC/

Example with loading API in head section: http://jsfiddle.net/s2HkR/

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.

EDIT:

I’ve set a bounty to 250 ontop of the 50 I had previously.

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.

Here is the updated fiddle by Orlando: http://jsfiddle.net/cxysA/12/

–

EDIT 2 ON Gijs ANSWER:

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.

I used John’s Resig way to prevent document.write of which can be found here: http://ejohn.org/blog/xhtml-documentwrite-and-adsense/

When I used this method, I load the API successfuly but the snippets.js file is not loading at all.

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    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.

    Edit: 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).

    Here’s an almost-working example: http://jsfiddle.net/a8q2s/1/

    Here’s the steps I took:

    1. 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 old document.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 single document.write call (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.
    2. load the initial script on the button click with jQuery’s $.getScript or equivalent. Pass a callback function (I used a named function reference for clarity, but you can inline it if you prefer).
    3. Tell Skyscanner to load the module.

    Edit #2: Hah, they have an API (skyscanner.loadAndWait) for getting a callback once their script has loaded. Using that works:

    http://jsfiddle.net/a8q2s/3/

    (note: this still seems to use a timeout loop internally)

    • 0