This is normal since the contents inside the IFRAME is a separate page, and unless you reload that page, the new style will not be applied to it, just as if you update the style on pageA, pageB will get that new style only when you visit it (in this case, reload the page inside the IFRAME).
One solution would just be to automatically reload the page inside the IFRAME whenever the style is changed on the main page. The following generic code demonstrates how to reload an IFRAME when a link is clicked on:
Code:
<script type="text/javascript">
function reloadiframe(id){
window.frames[id].location.reload(true)
}
</script>
<a href="javascript:reloadiframe('t')">Reload IFRAME</a>
<iframe id="t" name="t" src="test.htm"></iframe>
The IFRAME should be given a "name" attribute.
So using this idea, you might add the above script, then modify your test page as follows:
Code:
<div>
Select Theme:</div>
<div onClick="javascript:reloadiframe('mainframe')"><a href="javascript:chooseStyle('none', 60)" checked="checked">Default Yellow Theme</a></div>
<a href="javascript:chooseStyle('orange-theme', 60)">Orange Theme</a> <a href="javascript:chooseStyle('green-theme', 60)">
Green theme</a><br />
<br />
<div class="myDiv">
This is current theme.</div>
<br />
<br />
<br />
<br />
This is Iframe >>>>>>>>><br />
<iframe id="mainframe" name="mainframe" src="myIframe.html"></iframe>
Bookmarks