Dojo and iFrames Tip

It’s funny you mention building rich UI’s in an environment that includes iframes and even the most harden of front end developer will shudder and then due to a defensive reflex go into a tirade about why iframes are evil (the word evil is always used for some reason) and how you should be ashamed for doing the work in the first place.

Well the unfortunate truth is that there are a huge number of iframes living happily across the internet and many corporate intranets. Any “portal” based system designed before 2005 probably has a huge smattering of iframes. So as much as we would all love to not have to deal with them, they’re out there and you’ll probably have to face your fear at some point.

Dojo is my library of choice when it comes to almost any JavaScript needs, so I’m always interested to see how it plays with iframes when I come across situations.

Today I had an interesting situation.

If you have a page with an iframe and that iframe is pulling in it’s own dojo.js and you’re using the Dojo pub/sub system, there is no way with a single publish to publish a topic across the entire UI.

If you’re publishing from the parent, the iframe won’t get it, if you publish from the iframe the parent won’t get it.

I pinged Alex Russell, who was as ever amazingly helpful (god knows how he has the time to answer unsolicited IM’s from people like me). He rattled off a series of ideas and options to get round the issue. The one that struck me as the “correct” solution was to not include dojo.js in the iframe but instead inherit the dojo object from the parent window.

dojo = window.parent.dojo;

This, on face value is awesome. Loading Dojo.js and thus having a dojo object in every iframe just seems like madness and an object management nightmare. Having everyone sharing a singular dojo object that lives in the top document just seems so much better and most of the time it is.

However…

There’s always a however isn’t there. There are issues with sharing a top level none iframe document specific dojo object. That issue is that the top level dojo object has no Out of the Box knowledge of the iframes or their content. It means you run the risk of getting into hot water with some very simple core DOM traversing scripts.

dojo.byId(‘foo’);
dijit.byId(‘foo’);
dojo.query(‘a.foo’);

All of these if run using a common shared Dojo object, even if the functions are called from “within” the iframe will not find what you are looking for if it lives in an iframe. They only traverse the parent document. If I’ve missed a config parameter or something else that makes Dojo work with iframes I’ll take back all of this and be very happy. I spent a few hours today trawling through the dojo forums and book, as well as drilling back through the source and nothing jumped out.

So in my original situation, we’ll actually probably keep each iframes own dojo.js and own dojo object. We’ll just be aware now that if we want to publish we have to publish within all the iframes.

dojo.publish("foo", [obj]);
frames[‘iframeName’].window.dojo.publish("foo", [obj]);
// and/or
window.parent.dojo.publish("foo", [obj]);

I’m going to look at writing a little handler script that can be used to pass a function and it gets passed to every iframe and then also maybe look at a function that does the opposite, extends a function like byId and looks through all the iframes for all the results.

There are many other quirks that iframes have with JavaScript libraries. Positioning is a peach of an issue, but I’ll save that for another time.

About this entry

You’re currently reading “Dojo and iFrames Tip,” an entry on Jon Sykes

Published:: 02.21.08 / 10pm

Category:: Uncategorized

QR Code for this Blog Post

Tony 02.22.08 / 2am

dojo.localPublish = dojo.publish; dojo.connect(dojo, "publish", function(){ window.top.dojo.localPublish("globalChannel",[arguments, window]); }); window.top.dojo.subscribe("globalChannel",function(args, windw){ if(windw != self) dojo.localPublish(args[0],args[1]); })

JP 02.22.08 / 2am

Tony, thanks for the snippet. Any chance you can give some background to what you’re doing here. I’m especially intrigued with the:

dojo.connect(dojo, “publish”, …..

I didn’t know that ‘publish’ was an event you could connect to through the Dojo object. That really makes things interesting.

Drop that into all frames.

It uses the pub sub system to repeat around the pages always bouncing off the top window.

Sorry..to elaborate further..

1. We create a version of dojo.publish that will only publish locally so that there’s a way of publishing only to this page.
2. We dojo.connect to the real dojo.publish so that every time it’s called, connect pushes the values going into the publish, through to the top window along with a reference of the local window.
3. top window publishes the information out over a channel “globalChannel” to all subscribed frame windows.
4. every frame gets the message (including the orig) and we use the current window compared to the reference window to make sure we don’t repeat ourselves. All windows other than the source publish it locally with dojo.localPublish.

Thinking about this, there’s a potential issue with taking over the global dojo.publish in that dijit widgets often now publish out event information.

With this in practice, you might want to be careful that you don’t get unexpected cross frame communication.

In the same way we created dojo.localPublish you could make a dojo.globalPublish leaving dojo.publish intact. Depends how you’re using it and if you want every use to let every frame know what’s going on.

JP 02.22.08 / 9am

Awesome thanks for the additional details Tony ! That was pretty much the idea I had in mind. I’d almost be tempted to sit down and try to create a module that you could bolt onto Dojo to make it work with iframes as if they were part of the global page (which would be bundled with any and all security issues it might have). It would be nice to be able to set a djconfig for usesIframes and just add things like you have here, and byId and the positioning things as extensions to the existing code.

Fly together Forever » share dojo among iframes 02.22.08 / 2pm

[...] pointed out by Jon’s blog post, simply use the dojo/dijit objects on the top window within an iframe won’t work for dojo [...]

liucougar 02.22.08 / 2pm

can’t seem to find trackback link here, so have to do it manually:
you can use dojo.withGlobal for iframes, see
http://www.liucougar.net/blog/archives/88

oops, seems my wordpress automatically find the trackback link for me, sorry for the above comment (and this one). Feel free to delete them.

JP 02.22.08 / 2pm

No problem, I just commented on your suggestion, both of those functions look like they are great additions to an iframe beating arsenal.