Conceptual: bookmarklet to create a header form and remove it again after submit

Question

Hi

So I've been pondering this for some time and trying out various strategies. Basically I'm trying to create a bookmarklet that, when clicked, pops up a header on whatever page you happen to be on. In this header, there is a small form, the contents of which are submitted to a server. Once this is submitted, the header should disappear. In all cases, I've loaded my JS with a simple loader bookmarklet:

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

The problem is tricker than it sounds - every idea i've come up with fails in some instance - and for now lets forget about IE compatibility, I'll deal with that later.

Idea 1 was to redirect the browser to a page on my server with the form at the top and the original page inside an iframe underneath. This works fairly well, but is very slow: 3 page loads to see the form and the original page, followed by another pageload once the form is submitted to return you to the original page. Furthermore, it breaks on sites that framebust.

Idea 2 was to insert an iframe at the top of the original page, the iframe src'ing the form document on my server. This works wonderfully and only requires 1 pageload (the iframe contents). However, absolutely placed elements on the original page remain in their absolute locations, overlaying my header, while everything else is shifted down. Furthermore, I find it is impossible to get rid of this header after the form is submitted short of also creating a link underneath the iframe which would hide the iframe and itself, which one would click after submitting the form. Long story short, not really production quality.

Idea 3 was not to use frames at all. Insert a div at the top of the page with my form on it, and this form would be submitted to my server. The problem with this of course is that the original page's stylesheets will affect my new div, and I can't for the life of me figure out how to tell the page not to style the header-div (or to style it only with my rules). I'm told this is trivial in jQuery, and while I've started learning/using it, I have not found a way to do this. Also there's also the position:absolute problem as described in idea 2, but I figure that's minor.

Am I being stupid in the way i'm going about this? Should I abandon all hope for making a header and just pop up a new window? I'd really like it to be a header, but a window will suffice if a header is impossible (this is 2009 - pretty much nothing is impossible online these days...)

Anyway, any help fixing the above ideas or a completely new idea is very very welcome.

Thanks a lot for your time,

Mala

Answer 1

How about inserting an <iframe> into the page?

That should be simple and won't inherit the original page's CSS. You can pass in anything you need for the iframe in the querystring.

I suppose making it self-destruct could be tricky... maybe you could redirect it to a page on the original domain, and poll for that.