2010-09-14 13 views
6

Sto cercando di creare un bookmarklet tra siti che ottenga una parola evidenziata, lo passa a un metodo CodeIgniter (domain.com/controller/method) e restituisce la definizione tramite un'API del dizionario. Ho uno scheletro che funziona bene su un singolo dominio, ma sto cercando di estenderlo per utilizzare il dominio incrociato JSONP. Ma non mi sento chiaro.JSONP per indicazioni di bookmarklet intersito

So che ho bisogno di caricare uno script da una posizione remota e iniettarlo nel contesto corrente. E credo che avrò bisogno di ottenere la parola evidenziata su una pagina, quindi chiamare un URL che assomigli a domain.com/controller/method/word per ottenere quello script. Poi diventa nebbioso.

penso essenzialmente due domande:

  • Dove faccio a includere il codice JavaScript necessario per gestire l'analisi e la scomparsa della parola tramite XMLHTTPRequest? Penso che questo sarà l'SRC della sceneggiatura che inserirò nel nuovo contesto. Questo è in qualche modo all'interno del mio metodo CodeIgniter rilevante? O questo nuovo script proviene da una posizione casuale sullo stesso server del metodo pertinente e chiama semplicemente?

Risposta: Questo non è complementare a XMLHTTPRequest, questo è in sostituzione di esso, in modo che la fase viene completamente rimosso. Il nuovo script chiama il metodo, passa le informazioni necessarie tramite stringhe di query e riceve la matrice JSON in risposta.

  • Sono a conoscenza che alla fine passerò la risposta JSON dal metodo come word(json_encode($array));?

Risposta: Sì, io passo che indietro come callbackFunctionName(json_encode($array));.

Aggiornamento

ho incluso le risposte a due dei miei tre risposte di cui sopra. Se qualcuno può spiegare le cose a fondo, naturalmente segnerò la loro risposta come corretta, altrimenti elaborerò i miei ostacoli in una risposta. Non ho ancora idea di dove scrivo la funzione di callback e cosa farò con quello in JS.

Grazie mille per l'aiuto che puoi dare su questo.

risposta

7

Prima impostare il proprio bookmarklet con un link si può cadere sulla barra dei segnalibri:

<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> 

sostituire l'URL per lo script, verrà caricato e in esecuzione sulla pagina host.

Tuttavia ora si trova nella pagina ospitata e non è possibile chiamare il server con XMLHTTPRequest poiché i domini non corrispondono.
Ecco che arriva JSONP.

Nello script caricato, si può mettere una funzione di esempio: function srvCallback(json){...}

Quando si desidera chiamare il server si inietta come uno script utilizzando una funzione simile come nel bookmarklet di cui sopra:

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(); 
} 

Iniettare la vostra richiesta, ad esempio:

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

Il server dovrebbe rispondere qualcosa del tipo:

E infine viene chiamata automaticamente la funzione srvCallback, all'interno della funzione si ottiene il JSON e si mostra il risultato all'utente.

+0

Hey Mic, sono un po 'confuso. Questo è un bookmarklet di cui stiamo parlando, quindi come dovrei inserire uno script nel corpo per cominciare? Qualunque cosa io voglia usare, ho bisogno di iniettarlo, giusto? –

+0

Spero che questa seconda ripresa ti possa aiutare. – Mic

+0

Hey Mic, il tuo aiuto mi ha fatto andare! Nel mio bookmarklet, ho iniettato il mio script secondario tramite una funzione autoesecutiva, e in quello script secondario, ho incluso tutto il mio JS e una funzione autoeseguibile per chiamare il mio metodo, che restituisce il metodo ({jsonData}). E nello stesso script secondario, ho una funzione chiamata metodo (jsonp) che riceve e analizza i dati. L'unica domanda che mi rimane è, ** perché la funzione di callback dell'iniezione iniziale? ** –