PDA

View Full Version : Style Sheet Switcher not working for I-frame



abhijeet_dighe
01-25-2010, 11:09 AM
1) Script Title: Style Sheet Switcher (v1.1)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

3) Describe problem:

I have I-Frame on some pages.
If I switch style sheet from main page, then main page is shown with new
style but I-Frame is not shown with new style sheet.
If I refresh the page then only I-frame is shown with new style.

ddadmin
01-26-2010, 08:08 AM
Please post a link to the page on your site that contains the problematic script so we can check it out.

abhijeet_dighe
01-27-2010, 11:06 AM
This is test link:
http://bulletlink-e8.com/test/test.html

In above test.html page, there is Iframe inside that.

If I change theme using Select Theme option under main page, then theme is changed only for main page, but not for Iframe page.

What I really want is that style sheet also should also be switched for IFrame page.

ddadmin
01-28-2010, 09:28 PM
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:


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


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