iframe css src change, if parent css src changes

Here's one way to approach this.

You can store the iframe website CSS source as a $_GET variable. For example, let's say you have the two files you have are:

• index.php: main page
• iframe.php: page to show in iframe

Now when you change the stylesheet of the main page, index.php, you can also call a JavaScript function to change the source of the iframe. For example, this is your original iframe, with stylesheet 1:

<iframe id="iframe" src="iframe.php?stylesheet=1"></iframe>

Then, in your changeStyle function, you can use getElementById to change the source of the page in the iframe, like this:

document.getElementById("iframe").src = "iframe.php?stylesheet=2";

From here, you can process which stylesheet to use using PHP on the server-side on iframe.php:

$stylesheet = $_GET["stylesheet"];
if($stylesheet == 1) {
     echo '<link rel="stylesheet" type="text/css" href="stylesheet1.css" title="main" media="screen">';
elseif($stylesheet == 2) {
     echo '<link rel="stylesheet" type="text/css" href="stylesheet2.css" title="main" media="screen">';
}

I haven't tested this code out, but theoretically it should work fine. Of course, I'm sure there's a variety of other ways to approach the problem, limited only by your ingenuity. This is one way to do it. Let me know if you run into any problems.

Update:

A second way to approach this (without using PHP, as OP requested) is similar, but you can process the URL using JavaScript instead of PHP. Take a look at window.location.search. It will return a string like this:

?foo=1&bar=2

Which you can then break up using JavaScript, like so:

var parts = window.location.search.substr(1).split("&");
var $_GET = {};
for (var i = 0; i < parts.length; i++) {
    var temp = parts[i].split("=");
    $_GET[decodeURIComponent(temp[0])] = decodeURIComponent(temp[1]);
}

alert($_GET['foo']); // 1
alert($_GET.bar);    // 2

Applying this to our situation, you can change the source of your stylesheet <link> using JavaScript, like so:

HTML:

<link id="main_stylesheet" rel="stylesheet" type="text/css" href="" title="main" media="screen">

JavaScript:

if($_GET['stylesheet'] == "1") {
     document.getElementById('main_stylesheet').href = "stylesheet1.css";
}
else if($_GET['stylesheet'] == "2") {
     document.getElementById('main_stylesheet').href = "stylesheet2.css";
}

Again, this code isn't tested, but I hope the theory is clear to you. The reference for this second method can be found here: Access GET directly from JavaScript?