JavaScript / Jquery : how to access a form present inside a iframe from parent window

Question

I have this situation where I have a Parent window ( form name : pform), on click of a button on Parent Window, I display an Iframe to the User. The Iframe is part of the Parent window initially, but there is a facility that Iframe can be Undocked. The Iframe has a separate form. By Undocked I mean the whole iframe is copied into a new window along with the form (Form name : cform).

How can I assess the hidden variables (id="r111.o1" and "r111.o2") in the Iframe from the Parent window.

<form method="post" action="xxx" name="pform" id="pform">
    <div>
    <div class="iframe">
    <iframe>
    <form name="cform" id="cform" >
    <input type="hidden" value="1" name="r111.o1" id="r111.o1">
    <input type="hidden" value="1" name="r111.o2" id="r111.o2">
    ...
</form>

After the Iframe is undocked,

<form method="post" action="xxx" name="pform" id="pform">
    <div>
    <div class="iframe">
</form>


<html><div><iframe>
    <form name="cform" id="cform" >
    <input type="hidden" value="1" name="r111.o1" id="r111.o1">
    <input type="hidden" value="1" name="r111.o2" id="r111.o2">
    ....

how can I still be able to access the hidden variables? Is this possible.??

Update: I have written this JS code which I able to identity the window/iframe in both docked or undocked.

XT.Assess = {};
XT.Assess.windows = new Array(); // creating array to keep track of the child window ( undocked) 
XT.Assess.iframes = new Array(); // creating array to keep track of the iframe ( docked) 
function validateRub(id) {
    var rubWindow = XT.Assess.windows[id];
    if( rubWindow ){ // undocked
    console.log( 'rubWindow = '+rubWindow );
    var rubcont = rubWindow.contentDocument || rubWindow.contentWindow.document; 
    console.log( 'rubcont = '+rubcont ); 
    var rubIframe = XT.Assess.iframes[id]; // not working
    console.log( 'rubrIframe = '+rubrIframe );
}
else { //docked
    var rubIframe = XT.Assess.iframes[id];
    console.log( 'rubIframe = '+rubIframe );
    var ifr = document.getElementById('Iframe0');
    console.log( 'ifr= '+ ifr);
    var ifrDoc = ifr.contentDocument || ifr.contentWindow.document;
    console.log( 'ifrDoc= '+ifrDoc );
    var theForm = ifrDoc.getElementById('cform');  // Iframe
    console.log( 'theForm= '+theForm );
}
return false;
}

All I need now is a code to iterate through the HTML elements in the object rubIframe and rubWindow. Am I going in the right path? Thanks in advance.

Have you checked this post http://stackoverflow.com/questions/478078/accessing-a-form-that-is-in-an-iframe ? — Yatin Mistry, Sep 19 '14 at 06:57
@YatinMistry thanks for the link. I hadn't referred that. I tried the solution in the link. It works when the window is docked. When the window is undocked then I am getting this error. In FF firebug:TypeError: `ifr is null; var ifrDoc = ifr.contentDocument || ifr.contentWindow.document;` — Ash_and_Perl, Sep 19 '14 at 07:18
Try -> [Get or Set value to Controls inside iFrame from Parent](http://www.codeproject.com/Tips/656521/Get-or-Set-value-to-Controls-inside-iFrame-from-Pa) — Fabio, Sep 19 '14 at 07:35

score 0 · Answer 1 · answered Sep 19 '14 at 09:07

0

you can use iframe content by using iframe contentwindow element

var iframe = document.getElementById("yourFrameId");
var iframeContent = (iframe.contentWindow || iframe.contentDocument);

and then you can call any functions of that file like

iframeContent.myfunction();

answered Sep 19 '14 at 09:07

Dev

120
6

have you tried this? I am not able to access my function that is inside the cform from the above else part.`var is_rub_incomplete = ifrDoc.checkRub();`. IN FF firebug, I am seeing error: _TypeError: ifrDoc.checkRub is not a function_ – Ash_and_Perl Sep 19 '14 at 10:42
I am trying to access the hidden variables in the form directly from the else part using `document.getElementById("cform")`. this is also not working. – Ash_and_Perl Sep 19 '14 at 10:48
yes I used this in my project for several times it works fine – Dev Sep 19 '14 at 11:32
no you can only use iframe functions and variables in your parent file after getting its content window or relative documents – Dev Sep 19 '14 at 11:34
try this var iframeContent = (document.getElementById("cform").contentWindow || document.getElementById("cform").contentDocument); and then var is_rub_incomplete = iframeContent .checkRub(); – Dev Sep 20 '14 at 06:24

JavaScript / Jquery : how to access a form present inside a iframe from parent window

1 Answers1

you can use iframe content by using iframe contentwindow element