PDA

View Full Version : How to change 2 iframes with one click in a 3rd frame?



robertsaunders
04-20-2005, 09:23 PM
Is it possible to change 2 different iframes with one click in a 3rd iframe? I realise that it would be possible to put all the iframes into one larger frame, but I was hoping for a neater solution.

Any ideas?

ddadmin
04-20-2005, 10:21 PM
I haven't actually tested this, but something like the below inside the 3rd iframe should work:


<script type="text/javascript">
function changetwo(url1, url2){
parent.document.getElementById("iframe1").src=url1
parent.document.getElementById("iframe2").src=url2
}
</script>

whereby "iframe1" is the ID of the 1st iframe, and "iframe2", of the 2nd iframe. You would call the above function using:


<a href="#" onClick="changetwo('http://google.com', 'http://news.com')">Change two iframes</a>

Arctic Fox
04-24-2005, 07:03 AM
I've links in one iFrame that change up to 3 other iFrames;

http://arctic.ithium.net/

View-source the menu iFrame to get an idea on coding.

the-muse
07-01-2005, 06:58 AM
Hello Forum members,
After searching "one click two iframes" in Google, I arrived at this forum. I've experimented for a few hours with ddamin's javascript, and have had 50% success. I'll do my best to describe the design layout, and how I am attempting to use ddadmin's code:

__________________
--------
image
--------
------------
iframe
(id=frame1)
QT Movie
------------
------------
iframe
(id=frame2)
Text
------------
__________________

I am attempting to click on the image to open a QuickTime Movie in frame1 with text information about various elements of the movie displayed in frame2 (directly under the movie).

After inserting the javascript in the appropriate table cell, then adding the URLs, when I click on the image, both frame1 and frame2 are activated. So I know the script is valid for this instance. But frame1 (the movie) displays a "page not found", although the link is valid.

There may be something about the URL1 that prevents the movie from opening in frame1. URL1 has "URLs within URLs". Here's the code, as I have modified it for the page:

<script type="text/javascript">
function changetwo(url1, url2){
parent.document.getElementById("frame1").src=url1
parent.document.getElementById("frame2").src=url2
}
</script>
<a href="#" onClick="changetwo('CLIPS/DAN-NOVEIL_GRAYSON.mov pluginspage=http://www.apple.com/quicktime/download/ autoplay=true bgcolor=000000 width=180 height=150','view3.html')">
<img src="images/small/DAN_NO_VEIL.gif" width="110" height="83" border="0"></a>

URL2 (view3.html) displays perfectly. URL1 (the QT Movie) returns, "The page cannot be displayed".

Do I need to insert extra single and / double quotes somewhere within the first code?

If not, can you see the problem and offer a fix?

Nice, clean script.

Best wishes,
The-Muse

jscheuer1
07-01-2005, 07:44 AM
It is most likely the compound url. I have found that .mov files display fine all by themselves in iframes, without the plug-in reference. If, for formatting reasons you are wedded to the plugin reference, use it as it normally would be used on a page that will then be displayed in the iframe*. However, I would use a different approach to begin with instead of getElementById, src= and id's for the iframes, I would use:

parent.frame1.location.replace(url1)

or

parent.frame1.location.href=url1

Where frame1 is the name of the iframe. Besides being a little more compact, This gives us the choice of either adding to (2nd example) or leaving the history stack unchanged (1st example).

*see: http://www.w3schools.com/media/media_quicktime.asp

the-muse
07-01-2005, 04:51 PM
Hello jscheuer1,
I appreciate your suggestion.


It is most likely the compound url. I have found that .mov files display fine all by themselves in iframes, without the plug-in reference. If, for formatting reasons you are wedded to the plugin reference, use it as it normally would be used on a page that will then be displayed in the iframe*.

You are correct with your assumption. But I had to remove all the coding, other than the actual URL. This is what it looked like after the modification:

<script type="text/javascript">
function changetwo(url1, url2){
parent.document.getElementById("frame1").src=url1
parent.document.getElementById("frame2").src=url2
}
</script>
<a href="#" onClick="changetwo('CLIPS/DAN-NOVEIL_GRAYSON.mov ','view3.html')">
<img src="images/small/DAN_NO_VEIL.gif" width="110" height="83" border="0"></a>

The results are somewhat quirky. I tested it in IE6 and Netscape6 on both Win98 and WinXP at two different locations. The problem during one of the tests was that the iFrame containing the QuickTime movie opened a blank page, and the movie wouldn't load until I refreshed the page.

I would prefer learning how to properly insert the html code within the javascript string. I tried every combination I could imagine using single quotes, double quotes, escapes, etc. None of them worked.

Unfortunately, this puzzle has me hooked, and even if there were an alternative which incorporated a different method altogether, I still want to pursue the answer to this question so that I might learn a bit more about javascript.

The exact question would be: What's wrong with the following code?:


<a href="#" onClick="changetwo('CLIPS/DAN-NOVEIL_GRAYSON.mov pluginspage=http://www.apple.com/quicktime/download/ autoplay=true bgcolor=000000 width=180 height=150','view3.html')">

I've included the quoted example without any single quotes, double quotes or escapes. I can't help but feel there's a proper way to modify the above string to allow the inclusion of the html code.

Until someone knows for sure that what I'm asking can't be done, I'll stay with this objective. Even though the QuickTime movie does load with the absence of the plugin reference, it doesn't seem to do so with consistent reliability. Every place I've researched (including your w3schools reference - thank you) has been adamant about keeping the plugin reference as part of the code.

Most gratefully,
The-Muse

jscheuer1
07-01-2005, 08:27 PM
First of all, as I am not very up on quicktime, my question would be, does this work:
<a href="CLIPS/DAN-NOVEIL_GRAYSON.mov pluginspage=http://www.apple.com/quicktime/download/ autoplay=true bgcolor=000000 width=180 height=150" target="frame1">My tests say no. If it will not work as a regular link, it certainly will not work as javascript. Part of the problem is that you are trying to pass more than just the src attribute to the iframe. Either pass each parameter separately (which probably will still have problems in some browsers) or have them already assembled on a page and launch that page into the iframe (recommended).

the-muse
07-07-2005, 12:28 PM
Hello jscheuer1,


... or have them already assembled on a page and launch that page into the iframe (recommended).

This recommendation worked like a charm. I am most grateful.

Best wishes,
The-Muse

Schwiz
05-13-2008, 06:49 PM
I am having some trouble:

I have two iframes on a webpage, one being a header with graphics and the other being content (tables). When I click a link I would like both the iframes to change respectively. How would I setup that script to do so because I am having a bit of trouble with it! Thanks all!

jscheuer1
05-14-2008, 04:01 AM
I am having some trouble:

I have two iframes on a webpage, one being a header with graphics and the other being content (tables). When I click a link I would like both the iframes to change respectively. How would I setup that script to do so because I am having a bit of trouble with it! Thanks all!

This really isn't a very ideal situation because, if javascript is disabled, one or both of the iframes won't get their appointed content. Unless you make your page so that non-javascript enabled users would get to see two links (one for each of the two actions) for every one that the javascript enabled users see, that is.

I can tell you how to have this work with javascript though. Say you have two iframes. Name them iframeone and iframetwo:

<iframe name="iframeone" . . .

and:

<iframe name="iframetwo" . . .

Then you could have a link:


<a href="some.htm" target="iframeone"
onclick="window.frames['iframetwo'].location.href='some_other.htm';return true;"
>Whatever</a>

This would put some.htm in iframeone and some_other.htm in iframetwo. But if javascript were disabled, only the first of these two things would happen. So you could have a noscript tag after your link (its contents would only be seen by non-javascript users):


<noscript><a href="some_other.htm" target="iframetwo">Whatever</a></noscript>

And it would if clicked take care of the part that the non-javascript user would otherwise miss out on.

Now the text (represented in both of the above by the word 'Whatever') should ideally convey to the non-javascript user that he or she needs to click both links to get the desired effect.

lilstray
08-01-2013, 07:06 PM
I can't seem to get this to work:

Code: <a href="allergy615.html" target="iframe2" onclick="window.frames ['iframe3'].location.href='allergy240.html';return true;">Allergy</a>

The first half works perfect and does open in iframe2, however the second part of code does not open in iframe3.

Do you see anything work with the line of code?

jscheuer1
08-01-2013, 07:59 PM
No, but it requires that you have an iframe on the page with a name attribute (id isn't good enough) of 'frame3'. And there can be only one iframe, one element really on the page with that name and you cannot use it even as an id on anything, except that iframe, if you want, but it only needs it as a name and must have it as a name.

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

If you have that, or do that and it doesn't fix it, and want more help:

Please include a link to the page on your site that contains the problematic code so we can check it out.