Turn Web Pages Into Services!
UPDATE:
Just came across a Mozilla proposed standard for doing something similar to what I was proposing in this article (should be implemented in newer browsers):
https://developer.mozilla.org/En/DOM:window.postMessage
—————————
I’m currently working on doing communication between cross-domain iframes, and if anyone has done this before they know it’s a bit of a pain.
Let me give a quick background example. I’m developing a bookmarklet for the current project I’m working on. The bookmarklet loads an iframe onto the page, and I want to be able to do two things:
On the parent page
-Listen for events happening in the iframe, so that I can remove the frame, and take appropriate actions on the page when the interaction with the frame is done.
On the iframed page
- I want to be able to receive a message from the parent, when the user selects an image on the parent page that they want to use as their preview image.
Right now, there’s no easy way for me to do either of these things.
Now, the reason that I’m prevented from doing this is understandably security. If you let me insert, or read content from the child frame, I could just frame sites while you’re browsing. I could then insert some javascript into the embedded frame, and in the background read all the things you’re typing into forms, clicking on the site, etc - without you knowing. This is not possible - and for good reason.
Now, there are some ways to communicate across sites that are cooperating with each other, though most of them are hacks.
The way I’m doing it now is using the fragment identifier (a.k.a. the hash, the part after the URL #, that specifies the section of the page to focus on). While you can’t read anything between the iframe and the parent - the one thing you can do is change the location.href of the iframe from the parent, or the parent from the iframe. This is often used to escape frames - e.g. a site can check if there’s a parent, and set it’s location so that it breaks out of the frame.
Now, the hash works, because changing just the fragment identifier doesn’t cause a page to reload. So, how the communication functions is that you set the fragment identifier of the iframed site, and the iframed site polls for changes to the fragment identifier.
http://www.tagneto.org/blogcode/xframe/ui.html
http://tagneto.blogspot.com/2006/06/cross-domain-frame-communication-with.html
http://softwareas.com/cross-domain-communication-with-iframes
Now, there’s other ways to do this - including
JSONP:
http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
and the W3C standardized Cross-Origin Resource Sharing:
http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/
But, these too have their limitations - which I won’t go into here. Although - after considering them, I did decide that the way we’re approaching things probably takes the least effort on my part.
Anyways, here’s my proposal:
A site should have a way to detect that it is framed. If it is framed, it should be able to expose a service to the parent frame. That way, I can control what is sent via the parent frame, and the parent frame has an easy way to interact in a controlled fashion cross-domain. Similarly, the parent frame should be able to expose a service to a child frame. With this done, standards could develop about common functions that people want to expose. Cross domain communication and mashups would be able to happen with greater ease, and we’d move a bit further away from the idea of a static web page composed of data from a single source.
What do you think?
