CODEWITHSUNDEEP
javascriptiframe
Angus Comber
Angus Comber

Reputation: 9708

Get instance of child object in iframe

I need to automate a web form which uses iframes to embed child 'forms' which can be considered as separate html pages.

So you get a parent document which contains what they call view fields which are iframes. Within the iframes are the 'child' embedded web pages.

A simple example:

I have cut out a lot off the html to reduce it to a reasonable size

<html>
<body>
  <div id="123" arid=123 artype="View" ardbn="vfMyChild" 
  class="arfid123 ardbnvfMyChild" 
STYLE="top:49 left:75 width:1038 height:322" arvfframe="&lt;iframe style=&quot;top:0 left:0 width:1038; height:322&quot name=&quot;VF123&quot;  title=&quot;View Field&quot; src=&quot;javascript:&amp;quot&#59;&amp;lt&#59;HTML&amp;gt&#59;&amp;lt&#59;/HTML&amp;gt&#59;&amp;quot&#59;&quot; &gt;
&lt;/iframe&gt;">
</div>

</body>
</html>

Then the embedded child html could be simple like this:

<html>
<body>
<div id="321" arid=321 artype="Char" ardbn="txtRegister">
   <label id="label321" class="label f6">Register:</label>
   <textarea id="arid_321" cols="20" maxlen=255 rows=1></textarea>
</div>
</body>
</html>

The html contained in the STYLE= looks a bit odd - not sure why it is like that. But I can see it is sort of an iframe.

I have an instance of the top level document object and I have an instance of the div with id=123. I need to automate the textarea object in the child. I tried the following which did not work.

var viewfields;  //is a ref to the div with id=123

if(viewfields) {
     window.alert("viewfields.length=" + viewfields.length);  //prints len=1 as expected
     // line below get Caught exception: Unable to get value of the 
     // property 'document': object is null or undefined
     var innerDoc = viewfields[0].contentDocument || viewfields[0].contentWindow.document;
     if(innerDoc) {
           window.alert("Wohoo we have an innerDoc");
     }
} else
      window.alert("no view fields found");

I am testing this using IE9.

Will I be able to get an instance of the inner web page with this html? If so, how?

EDIT

If it helps, here is the actual, unedited html for the div in question.

<div id="WIN_0_536870915" arid=536870915 artype="View" ardbn="vfCubaChildren"  class="arfid536870915 ardbnvfCubaChildren" STYLE="top:49&#59; left:75&#59; width:1038&#59;  height:322&#59;z-index:1001&#59;background-color:transparent&#59;" arvfframe="&lt;iframe  style=&quot;top:0&amp;#59&#59; left:0&amp;#59&#59; width:1038&amp;#59&#59;  height:322&amp;#59&#59;background-color: transparent&amp;#59&#59;&quot;  name=&quot;VF536870915&quot; frameborder=1 scrolling=&quot;auto&quot;  allowtransparency=&quot;true&quot; title=&quot;View Field&quot;  src=&quot;javascript:&amp;quot&#59;&amp;lt&#59;HTML&amp;gt&#59;&amp;lt&#59;/HTML&amp;gt&#59    ;&amp;quot&#59;&quot; onload=&quot;DVFol&amp;#40&#59;&amp;#41&#59;&quot;&gt;
&lt;/iframe&gt;">
</div>

That div holds the child form. The child form is like another html web page. It has standard html input fields and textarea's. I need to post text to the textarea's in the child (from the parent). But the problem is I cannot yet access the child html object from the parent.

Upvotes: 9

Views: 13022

Answers (3)

Manish Kshirsagar
Manish Kshirsagar

Reputation: 1

var viewfields; //is a ref to the div with id=123`

if(viewfields) { window.alert("viewfields.length=" + viewfields.length); //prints len=1 as expected

// Check if iframe loading is complete, attach rest of code to onload event 
if (viewfields[0].addEventListener){ // for Mozilla, FF, Chrome, etc...
    viewfields[0].addEventListener("onload",AfterFrameLoads());
}
else if (viewfields[0].attachEvent){ // for IE and Opera
    viewfields[0].attachEvent("onload",AfterFrameLoads());
}

}

// Attempt to access document after iframe loads.

function AfterFrameLoads(){
var innerDoc = viewfields[0].contentDocument || viewfields[0].contentWindow.document;

 if(innerDoc) {
       window.alert("Wohoo we have an innerDoc");
 }
else {
  window.alert("no view fields found");
}

}

Upvotes: 0

Du D.
Du D.

Reputation: 5300

If you are trying to get the data from the parent looking into the iframe then this is what you are looking for. Bare in mind that this only works if the iframe source is a page from the same domain, otherwise you wouldn't have the permission to access its contents.

http://jsfiddle.net/wao20/Ja54y/19/

First make sure your iframe is loaded, then you can call this to access to your iframe dom.

$('#iframe_id_123').contents().find('#element_inside_your_iframe');

Update:

If you want a pure js solution you can try this:

var f = document.getElementById('f123');
if (f != undefined){
    var doc = f.contentDocument || f.contentWindow.document;
    var txt = doc.getElementById('secret');
    alert(txt.value);
}
else {
    alert('No iframe, no secret!');
}

http://jsfiddle.net/wao20/Ja54y/34/

Upvotes: 8

KernelPanik
KernelPanik

Reputation: 8339

It is possible that the contents of the iframe are not loaded. You can try checking if the iframe is loaded, and if it is, then try to access its document element.

For example, the code to access the document element of the iframe is split into function AfterFrameLoads() which is called during the onload event of the iframe.

var viewfields;  //is a ref to the div with id=123`

if(viewfields) {
    window.alert("viewfields.length=" +  viewfields.length);  //prints len=1 as expected

    // Check if iframe loading is complete, attach rest of code to onload event 
    if (viewfields[0].addEventListener){ // for Mozilla, FF, Chrome, etc...
        viewfields[0].addEventListener("onload",AfterFrameLoads());
    }
    else if (viewfields[0].attachEvent){ // for IE and Opera
        viewfields[0].attachEvent("onload",AfterFrameLoads());
    }
 }

// Attempt to access document after iframe loads.

function AfterFrameLoads(){   
     var innerDoc = viewfields[0].contentDocument || viewfields[0].contentWindow.document;       

     if(innerDoc) {
           window.alert("Wohoo we have an innerDoc");
     }
    else {
      window.alert("no view fields found");
    }
}

Upvotes: 2

Related Questions