Results 1 to 4 of 4

Thread: Style Sheet Switcher not working for I-frame

  1. #1
    Join Date
    Jul 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Style Sheet Switcher not working for I-frame

    1) Script Title: Style Sheet Switcher (v1.1)

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...etswitcher.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.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Please post a link to the page on your site that contains the problematic script so we can check it out.
    DD Admin

  3. #3
    Join Date
    Jul 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •