Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Help on opening multiple iframe windows

  1. #1
    Join Date
    Aug 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help on opening multiple iframe windows

    okay what I am trying to do is make one link open up 3 different pages in 3 different iframes, is this possable?

    my other idea for this is, is there a way to have one link open up one page in an iframe and then that page auto loads the other two pages in the other two iframes.

    if any of the two is possable or you have your own suggestion for that, that would be awesome.

    thanks for all your help

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    Both are possible. There are several ways in javascript to change the page displayed in an iframe. There is one in html. Combining any 3 - the same or different one(s) may be used 3 or more times in javascript, the html method can only be used once at a given time but, can be combined with javascript method(s), should be able to create the effect you want. Here is one example:
    Code:
    <a href="page1.htm" target="frame1" onclick="window.frame2.location.href='page2.htm';window.frame3.location.href='page3.htm';return true;">Link Text</a>
    Now, all you need are 3 iframes and the three pages. Each iframe must be named. In this example the names are frame1, frame2 and frame3, ex:
    HTML Code:
    <iframe name="frame1" src=""></iframe>
    You can add whatever other attributes you like to the iframes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks that worked ^^

  4. #4
    Join Date
    Oct 2012
    Location
    England
    Posts
    88
    Thanks
    24
    Thanked 2 Times in 1 Post

    Default

    Hi,

    I am struggling with this too.

    I have this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title><style type="text/css">
    <!--
    HTML{
    scrollbar-face-color:#75EA00;
    scrollbar-arrow-color:brown;
    scrollbar-track-color:#EEEEEE;
    scrollbar-shadow-color:'';
    scrollbar-highlight-color:'';
    scrollbar-3dlight-color:'';
    scrollbar-darkshadow-Color:'';
    }
    -->
    </style>
    </head>
    
    <body>
    
    
    
    
    
    <iframe src="screens.html" style="border:0px #FFFFFF none;" name="screen" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="245px" width="330px"></iframe>
    
    <iframe src="menu.html" style="border:0px #FFFFFF none;" name="menu" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="245px" width="330px"></iframe>
    <br />
    <iframe src="text.html" style="border:0px #FFFFFF none;" name="text" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="245px" width="660px"></iframe>
    
    </body>
    </html>
    where I want three Iframes; Screens, Menu and Text.

    You click on a link in Menu and BOTH the screen AND text change.

    So far I have managed to get it to work with Menu actually being in the original webpage but when it's an Iframe it doesn't work. Menu needs to be an Iframe as that's where the information and links to videos will be kept.

    The code for Menu is this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Table</title>
    <style> 
    <!--
    HTML{
    scrollbar-face-color:#f4ebd9; 
    scrollbar-arrow-color:790e08;
    scrollbar-track-color:#ffffff;
    scrollbar-shadow-color:'';
    scrollbar-highlight-color:'';
    scrollbar-3dlight-color:'';
    scrollbar-darkshadow-Color:'';
    }
    -->
    </style></head>
    
    <body>
    
    
    
    
    <div style="text-align: left; width: 234px; float: left; height: 60px;">
      <div style="text-align: left; width: 70px; float: left; height: 60px; border: #ffffff 1px solid;">
      
      <a href="****.htm" target="screen" onclick="window.text.location.href='textenglish.htm';window.frame3.location.href='page3.htm';return true;">Link Text</a>
      
      <a href="tom.html" target="screen"><img src="whitesmall.jpg" width="68" height="51" border="0" /></a></div>
    <div style="text-align: left; width: 160px; float: left; height: 60px; border: #ffffff 1px solid;">
      <strong>White Rabbit</strong>
      Year 7 Football Team win against Top Valley <a href="textwhite.html" target="text">(text) </a></div>
    </div>
    
    <div style="text-align: left; width: 234px; float: left; height: 60px;">
      <div style="text-align: left; width: 70px; float: left; height: 60px; border: #ffffff 1px solid;"><a href="****.html" target="screen"><img src="kittinsmall.jpg" width="68" height="51" border="0" /></a></div>
    <div style="text-align: left; width: 160px; float: left; height: 60px; border: #ffffff 1px solid;">Miss Kittin Year 8 Basketball Girls win against Arnold Hill <a href="textmiss.html" target="text">(text)</a></div>
    </div>
    <div style="text-align: left; width: 234px; float: left; height: 60px;">
      <div style="text-align: left; width: 70px; float: left; height: 60px; border: #ffffff 1px solid;"><a href="harry.html" target="screen"><img src="taylorsmall.jpg" width="68" height="51" border="0" /></a></div>
    <div style="text-align: left; width: 160px; float: left; height: 60px; border: #ffffff 1px solid;">Taylor Swift</div>
    </div>
    <div style="text-align: left; width: 234px; float: left; height: 60px;">
      <div style="text-align: left; width: 70px; float: left; height: 60px; border: #ffffff 1px solid;"><a href="harry.html" target="screen"><img src="taylorsmall.jpg" width="68" height="51" border="0" /></a></div>
    <div style="text-align: left; width: 160px; float: left; height: 60px; border: #ffffff 1px solid;">Taylor Swift</div>
    </div>
    <div style="text-align: left; width: 234px; float: left; height: 60px;">
      <div style="text-align: left; width: 70px; float: left; height: 60px; border: #ffffff 1px solid;"><a href="harry.html" target="screen"><img src="taylorsmall.jpg" width="68" height="51" border="0" /></a></div>
    <div style="text-align: left; width: 160px; float: left; height: 60px; border: #ffffff 1px solid;">Taylor Swift</div>
    </div>
    <div style="text-align: left; width: 234px; float: left; height: 60px;">
      <div style="text-align: left; width: 70px; float: left; height: 60px; border: #ffffff 1px solid;"><a href="harry.html" target="screen"><img src="taylorsmall.jpg" width="68" height="51" border="0" /></a></div>
    <div style="text-align: left; width: 160px; float: left; height: 60px; border: #ffffff 1px solid;">Taylor Swift</div>
    </div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>
      <!-- MENU-LOCATION=NONE -->
    </p>
    </body>
    </html>
    Demo:

    http://www.bigwood.nottingham.sch.uk/news-test
    Last edited by jscheuer1; 02-06-2013 at 04:36 PM. Reason: Format, Merge

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    To get the onclick part to work from within an iframe, you must use parent. or top., ex (from your post, addition highlighted):

    Code:
    <a href="****.htm" target="screen" onclick="parent.window.text.location.href='textenglish.htm'; . . .
    Adding frames. might be good or required, at least for some browsers:

    Code:
    <a href="****.htm" target="screen" onclick="parent.window.frames.text.location.href='textenglish.htm'; . . .
    BTW, using either parent or top when it's all on the same page will still work as long as that page isn't in an iframe or frame.

    The difference between parent (looks up one level) and top (looks to the uppermost level in the window), is just that, where it looks. If as appears in this case you only have two levels, top and the iframes, they're the same here. If there's only one level it's the page itself regardless of what you use. If there are intermediate levels one can use parent.parent. or parent.parent.parent. as needed.

    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Jay Dog (02-07-2013)

  7. #6
    Join Date
    Oct 2012
    Location
    England
    Posts
    88
    Thanks
    24
    Thanked 2 Times in 1 Post

    Default

    Hi, thanks, I'll have a look at it when I'm back at work.

  8. #7
    Join Date
    May 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    I don't know if you can help me with a similar thing. I was hoping to try figure it out myself, but after spending 10 hours a day for the last few days trying everything I can find on the web, I think it's time to admit defeat and ask for help. When it comes to code, I'm pretty much a beginner, I'm using iWeb for authoring so am limited to snippets, but can edit the page post publishing if need be.

    My link is on my main page which has 3 frames.

    As I say I've tried so many things I don't think it's worth posting where I'm up to because it's probably all wrong, but this is what I have working so far when using a link to target one frame.

    Code:
    <div style="width:270px; font-family: Arial; font-size: 12px; color:#000000;"><style type="text/css">
    
    a:link {color: #4c4c4c; text-decoration: none;margin-left: 50px}
    a:visited {color: #4c4c4c; text-decoration: none;}
    a:hover {color: #0080ff; text-decoration: none;}
    </style>
    
    <a href="page1.html" target="frame1">Link</a>
    </div>
    Inserting:
    Code:
    onclick="window.frame(n).location.href='page(n).html';return true;"
    doesn't do anything more than open page1 in frame1

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    That should be like:

    Code:
    onclick="window.frames[1].location.href = 'somepage.htm'; return true;"
    which will target the second iframe on a page (assuming it has at least two) and put somepage.htm in it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #9
    Join Date
    May 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Mmmm, I thought I'd tried all combinations along those lines.

    For the avoidance of doubt, if my (let's say 2) frames are:
    Code:
    <iframe id="frame_1" name="frame_1" src="http://mydomain.com/poster_1.html" frameborder="0" width="286" height="388" scrolling="no" allowtransparency="true"></iframe>
    and
    Code:
    <iframe id="frame_2" name="frame_2" src="http://mydomain.com/poster_2.html" frameborder="0" width="400" height="100" scrolling="no" allowtransparency="true"></iframe>
    and the new pages I want to load into my two frames upon clicking the link 'Link' are:
    Code:
    http://mydomain.com/new_page_1.html
    and
    Code:
    http://mydomain.com/new_page_2.html
    what should replace (*) in my snippet below:
    Code:
    <div style="width:270px; font-family: Arial; font-size: 12px; color:#000000;"><style type="text/css">
    
    a:link {color: #4c4c4c; text-decoration: none;margin-left: 50px}
    a:visited {color: #4c4c4c; text-decoration: none;}
    a:hover {color: #0080ff; text-decoration: none;}
    </style>
    
    <a href="new_page_1.html" target="frame_1" onclick="(*).href='new_page_2.html'; return true;">Link</a>
    </div>
    Thank you very much for your assistance.

  11. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    Code:
    <a href="new_page_1.html" target="frame_1" onclick="window.frames.frame_2.location.href='new_page_2.html'; return true;">Link</a>
    You can do that, or you could do this instead:

    Code:
    <a href="new_page_1.html" target="frame_1" onclick="window.frames[1].location.href='new_page_2.html'; return true;">Link</a>
    Or this:

    Code:
    <a href="new_page_1.html" target="frame_1" onclick="window.open('new_page_2.html', 'frame_2'); return true;">Link</a>
    They might not all work in all browsers. The most reliable is the middle one, the one with the [1] in it. But, as I said before, there have to be at least 2 iframes on the page and the one you want for new_page_2.html has to be the second one. It looks like that's what you have/want. Some older Firefox browsers might have a problem with the first one. And some browsers, if their security settings are really high, might block the last one, but I doubt that.

    Only browsers with javascript missing or disabled will block the middle one, and the other two won't work then either.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. The Following User Says Thank You to jscheuer1 For This Useful Post:

    absolute beginner (05-17-2013)

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
  •