Question

I’m developing a system, which supports CSS themes. It’s Ok so far, I can change the theme as desired, but the system is composed by two parts:

First is the "skeleton" of the system: it contains the menu and the options to change theme. That menu loads the contents of the second part which is composed essentially by an iframe which loads the modules called by the clicks on menu.

I can change the theme of the first part of the system using the following code:

$("link").attr("href", "css/temas/"+theme_name+".css");

The theme_name is gathered by reading the link on the menu click. The system is ok here, and no change is needed. Beyond changing the main theme, it records a cookie, which is used to read for further system theming.

So, the second part of the system also reads that cookie to apply the theme, but it doesn’t change instantly as the main part does!

For example, when I click the theme icon, it instantly applies the theme without refreshing the screen, but that doesn’t happens to the second part! It apply the theme, but it’s shown only if I reload the iframe, and reloading, ain’t cool!

I’m trying to change the iframe theme with the following code:

$("#ifr_main link").attr("href", theme_name);

Where #ifr_main is the iframe name!

Does anybody knows how can I figure that out and apply the new CSS without having to refresh the page, as I do on the menu?

Answer 1

You need to select the content of the iFrame first before trying to select it’s link element.

$("#ifr_main").contents().find("link").attr("href", theme_name);

Side note, iFrames can be ugly 🙂