Controlling the top parent window from iframe with jquery or javascript

Question

Hi,

I have a page on my site which has a blank text field. Next to this is a button which opens up an iframe (using colorbox). This iframe shows a list of files - next to each file is a button which puts the filename in to the text field in the parent window by calling the function below:

function returnImage(file){

  $('#input_text_id', window.parent.document).val(file);
  parent.$.fn.colorbox.close();

}

This works great, however a problem arises when I click a folder in the iframe. This causes the page in the iframe to load a different page of files. After this, the function no longer works.

Is there anyway that I can use jquery to access the very top parent page and control that? So we would have something like:

function returnImage(file){

  $('#input_text_id', theoriginalwindow.document).val(file);
  parent.$.fn.colorbox.close();

 }

Hope this makes sense, if you require more info, please let me know.

Thanks

Answer 1

In top window:

<script>
   function returnImage(file, doc){
       $('#input_text_id', doc).val(file);
       $.fn.colorbox.close();
   }
</script>

From iframe:

<script>
    top.returnImage(file, document); // top is top parent window.
</script>

Answer 2

Use top.