1

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?

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Armando Freire
  • 417
  • 2
  • 7
  • 19

2 Answers2

3

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 :)

jValdron
  • 3,408
  • 1
  • 28
  • 44
  • iframes don't *have* to be ugly, it's all in how you use them. Scroll bars are what's ugly. – Wesley Murch Dec 01 '11 at 18:49
  • Whoooa dude!! I tried something similar using .find(), but i failed! hahah! The solution worked perfectly thanks! About the iFrame I think exactly like @Madmartigan ! – Armando Freire Dec 01 '11 at 18:49
  • Hahaha nice try @jValdron ! :P – Armando Freire Dec 01 '11 at 19:01
  • Here is a link that helped me. [Jquery change css of iframe](https://api.jquery.com/contents/) Look at the example "Change the background color of links inside of an iframe" near the bottom. – Jonas Dec 11 '19 at 19:39
0

It is because iframe content was loaded when your page is loaded, so after it, you cannot change its looking unless you are using JQuery/ajax methods or reload.
Yo can find some questions about it
here, here and here

maybe you can reload your ifreame via ajax, read here
Finally you should watch this video for more unique way.

Community
  • 1
  • 1
Alper
  • 1,085
  • 3
  • 20
  • 39
  • Actually I can, since I'm doing this on the main part. Look for my code snipped for the main part and @jValdron snippet for the 2nd! =] – Armando Freire Dec 01 '11 at 19:03