bookmarklet – trouble making a modal iframe

22 Sep

I’m making a Scrumptious Trails bookmarklet to add resources. Similar to the various “Add Bookmark” delicious bookmarklets.

I wanted to make it as a modal/lightbox, instead of a popup since I figure a lot of people nowadays are blocking popups or putting them in a separate tab. (Which isn’t what such people would want if they explicitly hit the bookmarklet, “Add To Trail”).

I can paint the bookmarklet. What I’m struggling with though is closing it. The iframe to Scrumptious is sitting on the page we want to Add to Trail. ie they’re in different domains, so can’t theoretically talk to each other. However, we can use the cross-domain cross-frame hacks to get around it.

The problem is we want the iframe to communicate with its parent, which is the opposite of what would be fairly straightforward:
(a) fragment ID hack – to send a message to its parent, the script in the Scrumptious iframe would have to change parent’s fragment ID (with the injected bookmarklet javascript polling from the parent domain). Possible, but messy to be mucking with the top-level window’s frag ID when we have no business with it. Might also be forbidden in some browsers.
(b) Marathon/Suicide iframe hack – nope. This requires a special marathon/suicide URL on the message recipient end. Here, the message recipient is the top-level window, beyond our control.
(c) Window resize hack – same as (b).

Looking at Instapaper code,I found

i.onload = function(){ setTimeout(_clipb233367_close, 350); }

So it just auto-closes after 350, hoping the request fired off in that time.

So, I’m a little stuck here. I’m thinking of the awful hack as a cheeky workaround. Or alternatively, I’m thinking I’ll just do the entire UI in the Scrumptious end, using an absolute positioned iframe covering the entire document. And when the user submits, the iframe will simply hide its entire UI.

UPDATE: Having slept on this problem, I realised:

* The absolute positioned iframe won’t work because, again, it has no way to reduce its size, so it will sit forever on top of the original web page.

* But I do have a solution – do the whole UI from the bookmarklet (in the original website domain) and create an invisible suicide iframe from Scrumptious, passing it the parameters on the command line, whose mission is to PUT the URL details. The iframe could either be killed via a timeout (like Instapaper) or just left alone indefinitely; being invisible, it will do no harm.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: