PDA

View Full Version : Loading into iframe from another iframe



cjohns
06-02-2005, 07:42 PM
I have a rather odd situation, and with my very limited javascript I knowledge I can't quite see how to solve it.

I have an html page (call it main.html) with with 2 iframes (actually, it's a bit more complicated, but that's all that's relevant to this discussion). Each iframe contains an image. Clicking on the image in iframe A should change the image in iframe A as well as in iframe B. Similarly, clicking on image B should change the images in iframes A and B (but different images to than if A is clicked).

As I see it, there are two approaches, but I don't know how to make either one work.

The simplest approach is to catch the click event within main.html, in a way that lets me determine which iframe was clicked on, and then load the new images appropriately (using the IFrame SSI script II from this site). But iframes don't have onclick handlers, so I don't know how to catch the click event.

The second approach is to embed each image within an html page (call them A.html and B.html). Then detecting the click in and changing the image in A is easy - I just put a normal a href tag around the image. But, then how do I change the image in B? I can call the javascript from A.html if I put the script into an external .js file, but the iframe that is hosting B.html is obviously unknown in A.html, so loadintoIframe(iframeB, "imgB2.jpg") won't work because the script is looking for iframeB in A.html, not main.html. What I need to do is something like loadintoIframe(parent.iframeB, "imgB2.jpg"), but I can't find any way of referencing a parent element from A.html.

Is there a way to make either of these approaches work? Or is there another way to do it that I'm missing?

jscheuer1
06-02-2005, 09:38 PM
I don't really have time to go into the details right now but, your second approach is more workable. Events on the contained page can trigger scripts in the parent page, this should solve all your problems, here is an idea of how:

Put something like this on the contained page(s):
onclick="parent.switchPages()"Then on the parent page have your function(s) to change the source files of the iframes:
function switchPages() {
if (document.getElementById('iframe's id').src=='somepage.htm')
document.getElementById('iframe's id').src='someotherpage.htm';
else
document.getElementById('iframe's id').src='somepage.htm'
}Things will be more elaborate, of course but, that's the basic idea.

cjohns
06-03-2005, 07:17 PM
That's awesome - the parent.someMethod() was exactly what I needed to call the javascript method in the context of the parent page rather than the sub-page!

thanks :-)