accessing a form that is in an iframe

Question

I'm trying to get access to a form and its elements. The form is within an iframe and the javascript code that is accessing the form is within the main document.

I'm not sure what else I should put into the question, so please let me know if I need to add something else.

(form and main page are in the same domain)

Thanks

score 15 · Accepted Answer · answered Jan 25 '09 at 19:34

15

var ifr = document.getElementById( yourIframeId );
var ifrDoc = ifr.contentDocument || ifr.contentWindow.document;
var theForm = ifrDoc.getElementById( yourFormId );

Or you could have some code in the frame that sets a variable in parent to the form, but I wouldn't trust that method.

answered Jan 25 '09 at 19:34

geowa4

40,390
17
88
107

1

Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin , it won't work for Two different domains. – Raj Kumar Samala Feb 21 '17 at 15:36
do you have any suggestion to make this work for cross domains also ? – Raj Kumar Samala Feb 21 '17 at 15:37
Try it as bookmarklet or TamperMonkey script - Its DTP plugin works even in Kiwi on Android. Made answer with working example (except formatted to multiple lines for readability) – Jan Apr 02 '22 at 11:55

score 3 · Answer 2 · answered Jan 25 '09 at 19:45

3

If your iframe has a name attribute, that can be used as a window name. If the frame name is "myframe":

myframe.document.getElementById("myform") // gives you the form element

answered Jan 25 '09 at 19:45

Ates Goral

137,716
26
137
190

You can also use frame ID to get the element by ID, just as you did with getting the form by ID from the frame. Of course, the form has to have an ID also. – Eddie Jan 25 '09 at 19:50

score 1 · Answer 3 · answered Apr 02 '22 at 11:50

Just made bookmarklet based on my older post Is it possible to save form data to a data file on the local computer and then reload that text file back into a form to select those same items?

It is reads inside iframe and set result JSON to textarea and prints to console:

javascript:o=document.getElementById("wf_IFid").contentDocument;
f=o.getElementsByTagName("input"), longest=f.length;
frm=f;
values={};
p=0;
for(a=0;a<longest;a++){
  el=frm[a];
  switch(el.type){
    case "checkbox":
      values[el.name]=el.checked;
      break;
    case "radio":
      if(el.checked)values[el.name]=el.value;
      else if(values[el.name]===undefined)values[el.name]=false;
      break;
    case "select-one":
      values[el.name]=el.selectedIndex<0?-1:el.options[el.selectedIndex].value;
      break;
    case "select-multiple":
      values[el.name]=[];
      for(i=0;i<el.options.length;i++){
        if(el.options[i].selected)values[el.name].push(el.options[i].value)
      }
      break;
    case "fieldset":
      break;
    case "button":
      break;
    case "submit":
      break;
    case "reset":
      break;
    case "file":
      break;
    case undefined:
      break;
    default:
      {
        if(el.getAttribute("aria-label")&&el.value){
          key=p++ + "|" + el.getAttribute("aria-label");
          values[key]=el.value
        }
      }
  }
}
t=o.createElement("textarea");
t.value=JSON.stringify(values, null, 2);
o.body.prepend(t);
console.log(JSON.stringify(values, null, 2));

accessing a form that is in an iframe

3 Answers3

Linked