Comment afficher un formulaire dans les pages d'un site à l'aide d'un bookmarklet (tel que Note dans Google Reader)?

Question

Dans Google Reader, vous pouvez utiliser un bookmarklet pour & noter " une page que vous visitez. Lorsque vous appuyez sur le bookmarklet, un petit formulaire Google s’affiche en haut de la page actuelle. Dans le formulaire, vous pouvez entrer une description, etc. Lorsque vous appuyez sur Soumettre, le formulaire se soumet sans quitter la page, puis le formulaire disparaît. Dans l’ensemble, une expérience très douce.

J’ai évidemment essayé de regarder comment cela se passait, mais les parties les plus intéressantes sont minifiées et illisibles. Alors ...

Des idées sur la façon de mettre en œuvre quelque chose comme ça (du côté du navigateur)? Quels sont les problèmes? Articles de blog existants décrivant cela?

Answer 1

Aupajo a raison. Cependant, je vous indiquerai un cadre de bookmarklet que j'ai élaboré pour notre site (www.iminta.com).

Le bookmarklet lui-même se lit comme suit:

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

Ceci n'injecte qu'un nouveau script dans le document contenant ce fichier:

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

Il est important de noter que le bookmarklet crée un iframe, le positionne et ajoute des événements au document afin de permettre à l'utilisateur, par exemple, d'appuyer sur Echap (pour fermer la fenêtre) ou de faire défiler l'écran (afin qu'il reste visible). Il masque également les éléments qui ne fonctionnent pas bien avec le positionnement z (le flash, par exemple). Enfin, il facilite la communication avec le javascript exécuté dans l'iframe. De cette manière, vous pouvez avoir un bouton de fermeture dans l'iframe qui indique au document parent de supprimer l'iframe. Ce genre de choses inter-domaines est un peu compliqué, mais c’est le seul moyen (je l’ai déjà vu) de le faire.

Pas pour la feinte de coeur; Si vous n'êtes pas bon en JavaScript, préparez-vous à lutter.

Answer 2

À ce niveau élémentaire, il utilisera createElement pour créer les éléments à insérer dans la page et appendChild ou insertBefore pour les insérer dans la page.

Answer 3

Vous pouvez utiliser un simple bookmarklet pour ajouter un < script > balise qui charge un fichier JavaScript externe capable de transmettre les éléments nécessaires au DOM et de présenter une fenêtre modale à l'utilisateur. Le formulaire est soumis via une requête AJAX, il est traité côté serveur et renvoie avec succès ou une liste d'erreurs que l'utilisateur doit corriger.

Ainsi, le bookmarklet ressemblerait à:

javascript: code-à-ajouter-script-tag-et-init-le-script;

Le script externe comprendrait:

• Possibilité d'ajouter un élément au DOM
• La possibilité de mettre à jour innerHTML de cet élément pour qu'elle soit le balisage que vous souhaitez afficher pour l'utilisateur
• Gestion du traitement de formulaire AJAX

L'effet de fenêtre peut être obtenu avec le positionnement CSS.

En ce qui concerne une ressource complète pour cette tâche spécifique, vous auriez de la chance de trouver quoi que ce soit. Mais jetez un coup d'œil aux différentes parties et vous y trouverez de nombreuses ressources. Recherchez des informations sur les fenêtres modales, l’ajout d’éléments au DOM et le traitement AJAX.