Geek Answers Handbook

JQuery cross-domain ajax: callback on execution

Background

I download and execute a script from another server ( cross-domain ) via jQuery .ajax(...) call.

There is some code that needs to be executed after the code from another server was executed , because otherwise some objects are "undefined" for now.

Perhaps important: The remote code contains another call to getScript(...) . And I have to wait until this code is executed. I cannot just load this second script from my code because its source is dynamic (i.e. Depends on some results of the remote script).

Doesn't work: success callback

Apparently, the success callback is called after the remote code barked, but before the remote code was executed .

 # coffee script executeLater = -> # this bit of code needs to run after the remote code has been executed. console.log("yehaa!") $.getScript("http://example.com/script-from-other-server.js") .success(executeLater) # this gets executed when the remote script is loaded, # but before the remote script is executed.

Doesn't work: async: false

Apparently, the async attribute is ignored for cross-domain queries, as stated here in the jQuery documentation: http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings

In addition, I would like to avoid installing async: false , as it is said to block the browser.

 # coffee script executeLater = -> # this bit of code needs to run after the remote code has been executed. console.log("yehaa!") $.ajax( dataType: 'script', url: 'http://example.com/script-from-other-server.js', async: false # does not work because the request is cross domain ) .success(executeLater)

Doesn't work: $.when(...).then(...)

Using jQuery once upon a time mechanism , apparently the then code is executed before when the block is executed .

 # coffee script executeLater = -> # this bit of code needs to run after the remote code has been executed. console.log("yehaa!") $.when( $.ajax( dataType: 'script', url: 'http://example.com/script-from-other-server.js', ) ).then(executeLater)

EDIT: Worked but unusable: ajax both scripts

I cannot do this in production, as I said in the "background" section above, but if I reduce all cases to one and load the second script, which is usually executed by the remote script, everything works fine in my script.

 # coffee script executeLater = -> # this bit of code needs to run after the remote code has been executed. console.log("yehaa!") $.getScript("http://example.com/script-from-other-server.js") .success( -> $.ajax( dataType: 'script', cache: true, # I do not know this url in production: url: 'http://example.com/another-script-from-the-remote-server.js' ) .success(executeLater) )

What to avoid

I would really like to use constructs like the setTimout pairs until a specific object is defined using the executeLater() method.

What I need: executed callback

It would be ideal to use the executed callback rather than the success callback of the ajax method. But so far I have not found this callback.

 # coffee script executeLater = -> # this bit of code needs to run after the remote code has been executed. console.log("yehaa!") $.ajax( dataType: 'script', url: 'http://example.com/script-from-other-server.js', executed: executeLater # <---- I NEED A CALLBACK LIKE THIS )

Any clues?

Does anyone know how I can execute the executeLater method after the remote code has been executed ? Thanks!

EDIT: single-origin policy

As adeneo noted in the comment section, JavaScript can be a policy issue of the same origin .

a script that loads with an ajax or getScript is not allowed to download and execute another script from a remote server in order to prevent a malicious script from the "calling home",

This is confirmed by the following experiment:

This does not work:

 <html><head> <script language="javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script> <script language="javascript"> jQuery.getScript("http://example.com/script-from-other-server.js") </script> </head><body></body></html>

It works:

According to this answer stackexchange, a policy of the same origin allows remote scripts loaded with the html <script> to load other remote scripts via ajax .

 <html><head> <script language="javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script> <script language="javascript" src="http://example.com/script-from-other-server.js"></script> </head><body></body></html>

The question remains : is there a good way to do this with an ajax call, or do I need to "prove" that I "own this code" by inserting the <script> in the html document?

+7
jquery ajax callback same-origin-policy cross-domain
source share
2 answers

Background

adeneo suggestion to consider JavaScripts Same-Origin Policy (see comments on the question) really solved my problem.

If the question assumes that the success callback is called before the requested script is fully executed, the real problem is that the requested script requests another script, as indicated in the question:

Perhaps important: the remote code contains another call to getScript(...) . And I have to wait until this code is executed. I cannot just load this second script from my code because its source is dynamic (i.e. Depends on some results of the remote script).

When the requested script is loaded dynamically, this second getScript call getScript prevented by a policy of the same JavaScript origin.

Solution 1. Include script in html code

If you have access to html files, you can add a script tag with a remote script like src . That way, one “proves” that he really wants to load this remote script, and javascript will make a remote getScript call.

 <html><head> ... <script language="javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script> <script language="javascript" src="http://example.com/script-from-other-server.js"></script> </head><body></body></html>

To execute executeLater code, you can simply use the ready callback:

 # coffee script executeLater = -> # this bit of code needs to run after the remote code has been executed. console.log("yehaa!") $(document).ready(executeLater)

Solution 2: Limit policies of a specific origin

This is not recommended, but possible. There is a common question about stack overflow, how to get around a policy of the same origin:

Ways to circumvent a policy of the same origin

Solution 3: Wait for the script to execute

If, in addition to a policy of the same origin, the remote script really has to run for so long that the local script has to wait for it, you can use the iframe Ahmed Nuaman solution:

stack overflow

+2
source share

This is a little nasty, but have you tried using iframe ? The idea is simple:

So here is a small example (uses jQuery):

 <form id="xform" action="http://foo.bar/foo/bar" method="get" target="xiframe"> <input type="text" name="foo" value="bar" /> </form> <iframe name="xiframe" id="xiframe"></iframe> <script> var form = $('#xform'), iframe = $('#xiframe'); iframe.load(function () { // run your stuff here }); form.submit(); </script>
0
source share

More articles:


All Articles