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

What is the best way to create a mapping function in JavaScript/TypeScript that accepts multiple dynamic variables as parameters?

Retrieving addresses by extracting p from the Python class within a div

What is the best approach to create a dynamic value from axios response in a reactive object?

Screen content of a post request in Node.js

The MVC framework coupled with a robust Javascript/JQuery validation library is a winning

Display a sneak peek on a separate tab

Could Google Adsense be causing issues with my website's navigation bar?

Create a new promise within a factory function

Show the "Splash" picture, then switch to a newly uploaded image and show it for a set amount of time

AngularJS field array

Python Selenium- Extract and print text from a dynamic list within a scrolling dropdown element

Can Three.js be used to create a compact canvas?

Unable to delete React element by ID as it is undefined

Ways to conceal a component based on a specific condition?

Learn how to incorporate latitude and longitude coding into PHP to display a map icon that correctly redirects to the desired URL when clicked

There is a lag in the loading of css stylesheets

Difference among rows

Sequelize Error: Object A is not linked to Object B in Node.js

Utilizing the Spread Operator in combination with a function call within the props of the Tab component in Material UI

What is the best way to consistently and frequently invoke a REST API in Angular 8 using RxJS?