getting elements out of an iframe

[adam291086]

I have a page that loads lots of images. These images are then used in another page within an iframe. I want to be able  to add an onclick function to each picture within the iframe. The onclick function will load the clicked image in full size below the iframe. 

 

Any ideas?

[rhodesa]

I haven't done a whole lot with iframes, but I know the following:

 

-There is a DOM attribute on the iframe element called contentDocument, which you can use to access the stuff inside the iframe.

-The iframe has to be from the same domain as the parent page to access the information

 

More on the iframe dom: http://www.w3schools.com/htmldom/dom_obj_iframe.asp

 

Hope that helps get you going...

[nogray]

Given both pages are in the same domain, you can add a function in the parent window to replace the source of the viewing image and call it from the iframe using "parent.FUNCTIONNAME()"

 

e.g.

Main page
<script type="text/javascript">
function replace_img(src){
   document.getElementById('display').src = src;
}
</script>
<iframe ....></iframe>
<img src="images/spacer.gif" id="display" border="0" alt="" />


Iframe page:
<img src="images/some_image.jpg" onclick="parent.replace_img("images/some_image_large.jpg");" border="0" alt="" />

Not tested

[rhodesa]

The JavaScript to access an image inside the iframe from the parent to add an onclick would be:

 

var img = document.getElementById('iframe_id').contentDocument.getElementById('image_id');
img.onclick = function(){alert('clicked');}