Dynamic CSS via cross-domain iframes

June 17, 2011 11:17 AM

Any cross domain scripting tricks to help an iframe figure out its parent window to allow me to dynamically switch css?

I run a t-shirt shop through Spreadshirt and I'm trying to embed my product list on my shop's facebook page. The product list is itself an iframe on Spreadshirt's servers that I normally have embedded on my page "product.php". For facebook it would be embedded on a page called "facebook.php" which would then be displayed on a facebook tab.

Here is the crux my problem, the facebook page has a quite restrictive width of 520px so I'd need to load special CSS to rejigger the product list to fit on facebook, but I don't want to be forced to use that 520px layout on my normal pages. The solution seems simple in the abstract use javascript to determine which parent page the product list iframe is embedded in and document.write the correct CSS. Unfortunately since I'll be working cross domain it wont be so simple.

I've been reading a bit about window.postMessage but that doesn't seem to have enough compatibility to be worthwhile. I'm hoping this is the sort of thing that can be solved with a proxy iframe on the product list's page, but I really wouldn't know where to begin.

So, anyone know if this is possible to do in a way that is supported by most popular browsers? If so, any advice on where I should begin. Thanks much!

posted by Jezztek to Computers & Internet (9 answers total)

This might give you a start. You should be able to get the parent document name using something like this.
posted by dyno04 at 11:25 AM on June 17, 2011

Response by poster: Hey dyno04, thanks for taking the time to respond, but I'm afraid those are same-domain only solutions and are blocked if trying to go from an iframe hosted at spreadshirt.com to my domain.
posted by Jezztek at 11:33 AM on June 17, 2011

doesn't facebook send signatures? it does. Look in the $_SERVER variables
posted by the mad poster! at 11:42 AM on June 17, 2011

it's $_SERVER['signed_request'];
posted by the mad poster! at 11:48 AM on June 17, 2011

sorry, $_REQUEST['signed_request'];
posted by the mad poster! at 11:48 AM on June 17, 2011

hmm it seems to be a $_POST, not $_GET variable. you have to use only javascript, no server side code?
posted by the mad poster! at 11:52 AM on June 17, 2011

Response by poster: Yeah, TMP. I have access to everything on my side, but on the Spreadshirt side I can only do javascript and flat HTML (such as adding in a proxy iframe back to my domain).
posted by Jezztek at 12:43 PM on June 17, 2011

Best answer: Use the adage of "measure what you care about, don't try to detect specific circumstances." Check the width of the iframe in your JS and if it's less than some threshold then enable the alternative CSS. You don't really care what the embedding page is, what matters is the width, and you can get that trivially without any cross domain nonsense.
posted by Rhomboid at 12:57 PM on June 17, 2011 [3 favorites]

Response by poster: Damn Rhomboid, such a simple and elegant solution that somehow never even occurred to me.

Thanks much!
posted by Jezztek at 2:31 PM on June 17, 2011