ansaurus

Question

JSONP for cross-site bookmarklet guidance

Answer 1

+1 A:

First set your bookmarklet with a link you can drop on the bookmark bar:

<html>
<head></head>
<body>
    <a href="javascript:(function(src, cb){var s = document.createElement('script');s.charset = 'UTF-8';document.body.insertBefore(s, document.body.firstChild);s.src = src;if(typeof cb === 'function'){s.onload = cb;s.onreadystatechange = function(){(/loaded|complete/).test(s.readyState)&&cb(s);};}return s;}('http://github.com/pure/pure/raw/master/libs/pure.js', function(e){alert('loaded');}))">load</a>
</body>
</html>

Replace the url by your script, it will be loaded and running on the host page.

However it sits now in the hosted page, and can't call your server with XMLHTTPRequest as the domains do not match.
Here comes JSONP.

In the loaded script, you can put a function eg: function srvCallback(json){...}

When you want to call your server you will inject it as a script using a similar function as in the bookmarklet above:

function jsonp(src){
    var s = document.createElement('script');
        old = document.getElementById('srvCall');
    old && document.body.removeChild(old);
    s.charset = 'UTF-8';
    s.id = 'srvCall';
    document.body.insertBefore(s, document.body.firstChild);
    s.src = src + '?' + new Date().getTime();
}

Inject your request, eg:

jsonp('http://domain.com/controller/method/word')

The server should respond something like:

srvCallback({word:'hello'});

And finally the function srvCallback is automatically called, inside the function you get your JSON and show the result to the user.

Mic 2010-09-14 22:36:24

Hey Mic, I'm a bit confused. This is a bookmarklet we're talking about, so how would I put either script in the body to begin with? Anything I want to use, I need to inject it, right?

Joshua Cody 2010-09-14 22:42:56

Hope this second take will help you.

Mic 2010-09-15 08:29:56

Hey Mic, your help got me going! In my bookmarklet, I injected my secondary script via a self-executing function, and in that secondary script, I included all my JS and a self-executing function to call my method, which returns method({jsonData}). And in that same secondary script, I have a function named method(jsonp) that receives and parses the data. The only question I have left is, **why the callback function on the initial injection?**

Joshua Cody 2010-09-16 15:38:00

If your JS has no dependencies and/or starts by itself, you do not need the callback.

Mic 2010-09-16 16:08:54

Great, thanks for such a thorough, and well-thought answer, Mic.

Joshua Cody 2010-09-16 18:02:24

Post the url here, when it is available :)

Mic 2010-09-16 21:03:50

ansaurus

tags:

views:

answers:

JSONP for cross-site bookmarklet guidance

related questions