If the iframe's CSS source is updated, the parent's CSS source will also change

Question

If the iframe's CSS source is updated, the parent's CSS source will also change

I'm currently working on a unique school project that involves creating multiple CSS styles for different views.

<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">

There are also buttons on the page to switch between these styles.

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="Normal Style Sheet"></span>
<span onclick="changeStyle('alt')" class="inverse"><img src="css/pictures/inverse.png" alt="Inverse Style Sheet"></span>
</div>

In addition, there's an image map with a clickable area that links to an iframe target when clicked in a 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>

The goal is to change the CSS of both the parent window and the iframe when switching styles. Both pages are hosted on the same domain and have similar HTML structure.

EDIT: I am restricted to using only HTML5, XHTML Strict, jQuery/javascript for this project.

javascript jquery html css iframe

Answer 1

Answer №1

If you're looking for a solution, here's an interesting approach to consider.

Imagine storing the CSS source of an iframe website as a $_GET variable -- intriguing, right? Let's take a scenario where you have two files at hand:

index.php: serves as the main page
iframe.php: a page designed to be displayed within an iframe

The idea here is when adjusting the stylesheet of your main page (index.php), you can simultaneously invoke a JavaScript function to modify the source content within the iframe. To give you a visual, suppose this represents your original iframe with the initial stylesheet setting:

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

Then in your changeStyle function, leverage getElementById to update the iframe's source link, something like this:

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

From there, PHP facilitates determining which stylesheet to employ on the server-side via 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">';
}

This code remains untested but theoretically viable. Undoubtedly, diverse methods exist to tackle this predicament based on your creativity. Feel free to try out this method and reach out if you encounter any hurdles.

An Alternative Approach Update:

Another perspective involves a similar concept sans PHP integration as per OP's request. Here, JavaScript comes into play to process the URL instead of PHP. Delve into window.location.search, returning a string akin to the following example:

?foo=1&bar=2

You can dissect this using JavaScript:

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

In terms of application, adapt this understanding to modify the stylesheet <link> through JavaScript:

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";
}

Although unverified, the underlying theory should provide clarity. Further insights on this second technique are available from: Access GET directly from JavaScript?

Answer 2

If you're looking for a solution, here's an interesting approach to consider.

Imagine storing the CSS source of an iframe website as a $_GET variable -- intriguing, right? Let's take a scenario where you have two files at hand:

index.php: serves as the main page
iframe.php: a page designed to be displayed within an iframe

The idea here is when adjusting the stylesheet of your main page (index.php), you can simultaneously invoke a JavaScript function to modify the source content within the iframe. To give you a visual, suppose this represents your original iframe with the initial stylesheet setting:

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

Then in your changeStyle function, leverage getElementById to update the iframe's source link, something like this:

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

From there, PHP facilitates determining which stylesheet to employ on the server-side via 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">';
}

This code remains untested but theoretically viable. Undoubtedly, diverse methods exist to tackle this predicament based on your creativity. Feel free to try out this method and reach out if you encounter any hurdles.

An Alternative Approach Update:

Another perspective involves a similar concept sans PHP integration as per OP's request. Here, JavaScript comes into play to process the URL instead of PHP. Delve into window.location.search, returning a string akin to the following example:

?foo=1&bar=2

You can dissect this using JavaScript:

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

In terms of application, adapt this understanding to modify the stylesheet <link> through JavaScript:

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";
}

Although unverified, the underlying theory should provide clarity. Further insights on this second technique are available from: Access GET directly from JavaScript?

If the iframe's CSS source is updated, the parent's CSS source will also change

Answer №1

Similar questions

How can I optimize the performance of JS-heavy pages on mobile devices?

Building a Next.js application that supports both Javascript and Typescript

AngularJS: Creating a dual-column layout with alternating styles

File is indicating a status of 200 ok, however it is not being displayed on the screen (node.js, expressjs)

Allow for separation amongst my cellular components

Next.js manages 0Auth authentication using MoneyButton for authorization

Verify the level of opacity in the image

Differences between Creating and Updating Objects in JavaScript

Issue with Next JS router.push not functioning unless the page is refreshed

Validating Input in a Textbox Using Jquery When Pasting Data

Error occurred during SCSS rendering process: [Internal Error: Unable to locate or read the specified file.]

Error message encountered while trying to instantiate 'FormData'

Trim the edges of a photo and add the Kinetic filter

Prevent Cookie Access from AJAX REST Request in JavaScript

Tips for customizing the selection tip of a custom cursor using CSS

Editing DOM elements within Angular JS using Greasemonkey extension

Storing multiple values of dynamically added elements in a single variable and accessing them within a function

If I choose a different option from the dropdown list, I would like a textbox to appear

Increase the div id using jQuery

After running the JavaScript function, the temporary display of textbox is initiated