Menu
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="<iframe style="top:0 left:0 width:1038; height:322" name="VF123" title="View Field" src="javascript:&quot;&lt;HTML&gt;&lt;/HTML&gt;&quot;" >
</iframe>">
</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; left:75; width:1038; height:322;z-index:1001;background-color:transparent;" arvfframe="<iframe style="top:0&#59; left:0&#59; width:1038&#59; height:322&#59;background-color: transparent&#59;" name="VF536870915" frameborder=1 scrolling="auto" allowtransparency="true" title="View Field" src="javascript:&quot;&lt;HTML&gt;&lt;/HTML&gt; ;&quot;" onload="DVFol&#40;&#41;">
</iframe>">
</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.
396
Getting the element in IframegetElementById() method by passing iframe id as an argument. const iframe = document. getElementById("myIframe"); Now, it has and contentWindow property which returns the document object by using that we can access the elements from an Iframe.
When a page is running inside of an iframe, the parent object is different than the window object. You can still access parent from within an iframe even though you can't access anything useful on it. This code will never cause an error even when crossing origins.
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/
63
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");
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
