Come visualizzare un modulo nelle pagine di qualsiasi sito utilizzando un bookmarklet (come Nota in Google Reader)?

Question

In Google Reader, puoi utilizzare un bookmarklet per "annotare" una pagina che stai visitando.Quando premi il bookmarklet, un piccolo modulo di Google viene visualizzato nella parte superiore della pagina corrente.Nel modulo è possibile inserire una descrizione, ecc.Quando premi Invia, il modulo si invia automaticamente senza lasciare la pagina, quindi il modulo scompare.Tutto sommato, un'esperienza molto fluida.

Ovviamente ho provato a dare un'occhiata a come è fatto, ma le parti più interessanti sono minimizzate e illeggibili.COSÌ...

Qualche idea su come implementare qualcosa di simile (sul lato browser)?Quali problemi ci sono?Post di blog esistenti che descrivono questo?

Answer 1

Aupajo ha ragione.Ti indicherò, tuttavia, una struttura bookmarklet che ho elaborato per il nostro sito (www.iminta.com).

Il bookmarklet stesso recita come segue:

javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','http://www.iminta.com/javascripts/new_bookmarklet.js?noCache='+new%20Date().getTime());document.body.appendChild(e)})())

Questo inserisce semplicemente un nuovo script nel documento che include questo file:

http://www.iminta.com/javascripts/new_bookmarklet.js

È importante notare che il bookmarklet crea un iframe, lo posiziona e aggiunge eventi al documento per consentire all'utente di eseguire operazioni come premere il tasto escape (per chiudere la finestra) o scorrere (in modo che rimanga visibile).Nasconde anche gli elementi che non funzionano bene con il posizionamento Z (flash, ad esempio).Infine, facilita la comunicazione con il javascript in esecuzione all'interno dell'iframe.In questo modo, puoi avere un pulsante di chiusura nell'iframe che indica al documento principale di rimuovere l'iframe.Questo tipo di operazioni tra domini è un po' complicata, ma è l'unico modo (che ho visto) per farlo.

Non per i deboli di cuore;se non sei bravo con JavaScript, preparati a lottare.

Answer 2

Al suo livello base utilizzerà createElement per creare gli elementi da inserire nella pagina e appendChild O insertBefore per inserirli nella pagina.

Answer 3

Puoi utilizzare un semplice bookmarklet per aggiungere un tag <script> che carica un file JavaScript esterno che può inviare gli elementi necessari al DOM e presentare una finestra modale all'utente.Il modulo viene inviato tramite una richiesta AJAX, viene elaborato lato server e restituisce con successo o un elenco di errori che l'utente deve correggere.

Quindi il bookmarklet sarebbe simile a:

javascript:code-to-add-script-tag-and-init-the-script;

Lo script esterno includerebbe:

• La possibilità di aggiungere un elemento al DOM
• La possibilità di aggiornare innerHTML di quell'elemento affinché sia ​​il markup che desideri visualizzare per l'utente
• Gestione per l'elaborazione del modulo AJAX

L'effetto finestra può essere ottenuto con il posizionamento CSS.

Per quanto riguarda una risorsa completa per questa attività specifica, saresti abbastanza fortunato a trovare qualcosa.Ma dai un'occhiata alle singole parti più piccole e troverai molte risorse.Dai un'occhiata in giro per informazioni sulle finestre modali, sull'aggiunta di elementi al DOM e sull'elaborazione AJAX.