conceptuel: bookmarklet pour créer une forme d'en-tête et retirez-le de nouveau après soumettre

Question

J'ai réfléchissais depuis un certain temps et essayer différentes stratégies. Fondamentalement, j'essaie de créer un bookmarklet qui, lorsque vous cliquez dessus, affiche un en-tête sur la page sur laquelle vous vous trouvez. Dans cet en-tête, il y a une petite forme dont le contenu est soumis à un serveur. Une fois que ceci est soumis, l'en-tête devrait disparaître. Dans tous les cas, j'ai chargé mes JS avec un chargeur simple bookmarklet:

javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://localhost/bklts/script.js';})(); 

Le problème est Tricker qu'il n'y paraît - chaque idée que je suis venu avec échoue dans certains cas - et laisse maintenant oublier Compatibilité IE, je traiterai de cela plus tard.

Idée 1 était de rediriger le navigateur vers une page sur mon serveur avec le formulaire en haut et la page originale à l'intérieur d'un iframe en dessous. Cela fonctionne assez bien, mais est très lent: 3 chargements de page pour voir le formulaire et la page d'origine, suivi d'un autre pageload une fois que le formulaire est soumis pour retourner à la page d'origine. De plus, il casse sur les sites qui encadrent.

Idea 2 était d'insérer une iframe en haut de la page originale, le iframe src'ing le document de formulaire sur mon serveur. Cela fonctionne à merveille et nécessite seulement 1 pageload (le contenu iframe). Cependant, les éléments absolument placés sur la page d'origine restent dans leurs emplacements absolus, superposant mon en-tête, tandis que tout le reste est décalé vers le bas. De plus, je trouve qu'il est impossible de se débarrasser de cet entête après que le formulaire ait été soumis à court de créer aussi un lien sous l'iframe qui cacherait l'iframe et lui-même, sur lequel on cliquerait après avoir soumis le formulaire. Longue histoire courte, pas vraiment la qualité de production.

Idea 3 était de ne pas utiliser des cadres du tout. Insérer un div en haut de la page avec mon formulaire, et ce formulaire serait soumis à mon serveur. Le problème avec ceci est bien sûr que les feuilles de style de la page originale affectent ma nouvelle div, et je ne peux pas comprendre comment dire à la page pas pour styler la div-header (ou pour le styler seulement avec mes règles). On me dit que c'est trivial dans jQuery, et pendant que j'ai commencé à l'apprendre/l'utiliser, je n'ai pas trouvé un moyen de le faire. Il y a aussi la position: problème absolu tel que décrit dans l'idée 2, mais je me dis que c'est mineur.

Suis-je stupide de la façon dont je vais à ce sujet? Devrais-je abandonner tout espoir de faire un en-tête et juste ouvrir une nouvelle fenêtre? Je voudrais vraiment que ce soit un en-tête, mais une fenêtre suffira si un en-tête est impossible (c'est 2009 - à peu près rien n'est est impossible en ligne ces jours-ci ...)

Quoi qu'il en soit, toute aide fixant le au-dessus des idées ou une idée complètement nouvelle est très très bienvenue.

Merci beaucoup pour votre temps,

Mala

Answer 1

Que diriez-vous d'insérer un dans la page?

Cela devrait être simple et ne sera pas hériter de la CSS de la page originale. Vous pouvez transmettre tout ce dont vous avez besoin pour l'iframe dans la chaîne de requête. Je suppose que le faire s'auto-détruire pourrait être difficile ... peut-être que vous pourriez le rediriger vers une page sur le domaine d'origine, et interroger pour cela.