iframe css src change, if parent css src changes

Question

I am working on a random school project.

Currently, I have a page that includes two CSS. One for normal view and one for handicapped view.

<link rel="stylesheet" type="text/css" href="css/main.css" title="main" media="screen">
<link rel="stylesheet" type="text/css" href="css/gyengen.css" title="alt" media="screen">

This page also includes two buttons that will change the used stylesheet.

function changeStyle(main) {
var lnks = document.getElementsByTagName('link');
for (var i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
lnks[i].disabled = true;
if (lnks[i].getAttribute('title') == main) lnks[i].disabled = false;
}}} 

<div class="gyengen">
<span onclick="changeStyle('main')" class="normal"><img src="css/pictures/inverse.png" alt="Normál stíluslap"></span>
<span onclick="changeStyle('alt')" class="inverse"><img src="css/pictures/inverse.png" alt="Inverz stíluslap"></span>
</div>

I have an image map on the page that links to an iframe target if clicked on the specific position.

<area shape="poly" coords="329,130,342,57,389,45,441,58,481,86,514,148,481,173,453,166,443,199,409,222,370,283,337,278,332,225,331,140" href="zones/gorgrond.html" alt="Gorgrond" title="Gorgrond" target="zone">

<iframe name="zone" onload='javascript:resizeIframe(this);'></iframe>

Both websites are on the same domain. I would like to achieve is that, if I change the stylesheet of the parent window with the method mentioned above, I would like to change the iframe's CSS source as well. The website linked into the iframe has the same html tags as the parent window.

EDIT: Unfortunately, I am only allowed to use HTML5, XHTML Strict, jQuery/java

What kind of students attend a random school? – random_user_name Nov 20 '13 at 21:27 — random_user_name, Nov 20 '13 at 21:27

score 1 · Answer 1 · edited May 23 '17 at 12:13

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?

I forgot to mention, but unfortunately we can only use HTML5, XHTML Strict, jQuery/java. — Oltier, Nov 20 '13 at 21:46
Do you mean jQuery/JavaScript? JavaScript and Java are two extremely different languages. "Java is to JavaScript as Car is to Carpet." — Charles, Nov 20 '13 at 21:51
I understand the method: Insert a javascript in iframe, that stores the currently enabled name/id of parent frame's CSS. If this variable is "main", then enable the iframe's "main" CSS. Else if, the parent frame's enabled css id/name is "alt" then enable the iframe's CSS called "alt". In addition, this javascript should run, when the iframe html is loaded. Although -unfortunately- I have had no luck yet to practice javascript, so my knowledge how to code this would require some help. Would it be possible to do this for me @goddfree ? — Oltier, Nov 20 '13 at 23:19
I pretty much already gave you all the key components of the code in my post. What is exactly unclear to you? — Charles, Nov 21 '13 at 04:03

iframe css src change, if parent css src changes

1 Answers1