Iframe Question

Question

If I control the content of two pages (PageA and PageB), one of which I want to load into an iframe (PageB), is there some javascript I can enter on PageB that will pull a style from the parent (PageA)? I need two style options, one for when PageB is loaded in an iframe, and one for when PageB loads on its own.

Answer 1

A solution I could see is loading the styles for both files from an external file, and set the src attribute of the IFrame to include a GET variable as such (rest of this example assumes a file with the name index2.php):

<iframe src="index2.php?iframe=Y" ... />

From there, towards the top of index2.php should look something like this:

<?php

     if ($_GET["iframe"] == "Y") {
         echo "<link href='global.css' type='stylesheet' />";
     } else {
         echo "<link href='specific.css' type='stylesheet' />";
     }

....

?>

While Kris' solution is also valid, I wouldn't and never do rely on Javascript to work the same in all browsers, regardless of whether it's been tested or not. At least this way, you know that the file is being loaded into an IFrame.

Answer 2

I would do it this way: check to see if your page is loaded in a frame or not and choose your styles based on this rather than attempting to pull styles from a parent page.

You can detect if you're in a frame via this type of code:

if ( top.location.href !== window.location.href ) { /* In frame */} else { /* Not in frame */ }