Detecting if site is inside iframe - loading custom CSS

Question

I would like to add an extra stylesheet for my site if it's being embedded inside an iframe on another site.

I found a JS method to try detecting an iframe embed over here: https://stackoverflow.com/questions/326069

Basically, you can run a script like:

if (top === self) { not in a frame } else { in a frame }

But I was wondering if it's possible to have that code add a stylesheet to the page in Drupal. Or maybe if there were some way to do it in Drupal, in hook_init() or something, that would be even better...

A final method I could think about is using the JS above to maybe add a URL parameter like ?embed=TRUE so I can detect that and add a stylesheet... but that would require a refresh inside the iframe :-/

Answer 1

You could...

• munge the window.location object to add the additional param, but that will force the page to reload. From there you can access the param in Drupal and write server-side code to do a drupal_add_css().
• Use jQuery (which comes with Drupal) to add the CSS directly.
• Use jQuery to add a link to the remote stylesheet.

Example of the third method:

if (top !== self) {
  var cssURL = 'http://example.com/my/stylesheet.css';
  $('head').append('<link rel="stylesheet" href="' + cssURL + '"/>');
}

I would think that as long as you can predict the stylesheet name, the last option is going to be the most elegant.

Note that you would want to add the JavaScript to the document with drupal_add_js() in Drupal.