¿Cómo mostrar un formulario en las páginas de cualquier sitio usando un bookmarklet (como Note en Google Reader)?

Question

En Google Reader, puedes utilizar un marcador para "notar" una página que estás visitando.Cuando presiona el marcador, se muestra un pequeño formulario de Google en la parte superior de la página actual.En el formulario puede introducir una descripción, etc.Cuando presiona Enviar, el formulario se envía solo sin salir de la página y luego desaparece.Considerándolo todo, una experiencia muy fluida.

Obviamente intenté echar un vistazo a cómo se hace, pero las partes más interesantes están minimizadas y son ilegibles.Entonces...

¿Alguna idea sobre cómo implementar algo como esto (en el lado del navegador)?¿Qué problemas hay?¿Existen publicaciones de blog que describan esto?

Answer 1

Aupajo tiene razón.Sin embargo, le indicaré un marco de marcadores que elaboré para nuestro sitio (www.iminta.com).

El bookmarklet en sí dice lo siguiente:

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

Esto simplemente inyecta un nuevo script en el documento que incluye este archivo:

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

Es importante tener en cuenta que el bookmarklet crea un iframe, lo posiciona y agrega eventos al documento para permitir al usuario hacer cosas como presionar escape (para cerrar la ventana) o desplazarse (para que permanezca visible).También oculta elementos que no funcionan bien con el posicionamiento z (flash, por ejemplo).Finalmente, facilita la comunicación con el javascript que se ejecuta dentro del iframe.De esta manera, puede tener un botón de cierre en el iframe que le indique al documento principal que elimine el iframe.Este tipo de cosas entre dominios son un poco complicadas, pero es la única forma (que he visto) de hacerlo.

No es para los débiles de corazón;Si no eres bueno en JavaScript, prepárate para luchar.

Answer 2

En su nivel muy básico utilizará createElement para crear los elementos a insertar en la página y appendChild o insertBefore para insertarlos en la página.

Answer 3

Puede usar un bookmarklet simple para agregar una etiqueta <script> que carga un archivo JavaScript externo que puede enviar los elementos necesarios al DOM y presentar una ventana modal al usuario.El formulario se envía mediante una solicitud AJAX, se procesa en el lado del servidor y regresa con éxito o con una lista de errores que el usuario debe corregir.

Entonces el bookmarklet se vería así:

javascript: código para agregar etiqueta de script e iniciar el script;

El guión externo incluiría:

• La capacidad de agregar un elemento al DOM.
• La capacidad de actualizar el HTML interno de ese elemento para que sea el marcado que desea mostrar al usuario.
• Manejo para el procesamiento de formularios AJAX.

El efecto de ventana se puede lograr con el posicionamiento CSS.

En cuanto a un recurso completo para esta tarea específica, tendría mucha suerte de encontrar algo.Pero eche un vistazo a las partes individuales más pequeñas y encontrará muchos recursos.Eche un vistazo para obtener información sobre ventanas modales, cómo agregar elementos al DOM y el procesamiento AJAX.