Get a value from Iframe into mainPage

Question

I would like to get a value of an input that is on an Iframe. I would like to get this value when I click on a button that is on the mainPage.

well, I have this piece of code

Javascript on the MainPage:

  var targetDiv = document.getElementById('CP_dem');

Html on MainPage: A tab that when you click on it, it load the Iframe and a button that call the javascript function

Html on the Iframe:

 Zip Code : <input class="textForm" id="CP_dem" type="text" name="CP_dem" maxlength="5" size="5" value="42101">

I would like to get the input value when I click on my MainPageButton.

The javascript code show that "targetDiv" is null.

Can you please help me. thx

http://stackoverflow.com/questions/1452871/how-can-i-access-iframe-elements-with-javascript http://stackoverflow.com/questions/1450286/how-to-access-parent-iframe-elements-from-a-child-javascript-page?rq=1 — Matt, Mar 18 '13 at 16:32

score 0 · Accepted Answer · answered Mar 18 '13 at 16:43

The first thing you have to tell is is:

Is the iframe hosted on the same http host as the parent website? If not, you will run into javascripts same origin protection, read about it at: http://en.wikipedia.org/wiki/Same_origin_policy

In short: You will not be accessible to access the content. But wait! There is a workaround which I will explain after dealing with the second case, where the http host is the same!

So lets talk about that second case. Well then the job is easy...

You just have to access the iframe (probably give the iframe tag an id "example"). Then you can access the window using example.contentWindow.document or example.contentDocument

Whichever is set, depends on the browser. You will have to do some checking in js. Something like

if(document.getElementById('contentWindow.document').contentWindow) {
 ifdoc = document.getElementById('contentWindow.document').contentWindow.document
} else {
 ifdoc = document.getElementById('contentWindow.document').contentDocument
}

Then you can access the form and element just as you do in javascript, i will not cover that here...

So lets jump to the interesting part of this answer! Lets work around the same origin poliy. This is also called "cross site scripting" (go ahead and google that...)

So basically it comes down to one thing:

There is one property that is accessible from the child as well as from the parent document!

It is the document.location property!

So what can you do?

The child site can modify it and then the parent site can monitor it and react to changes.

Another nice feature is the url fragment (the part which comes after the #). This part does not reload the website, so javascript can modify it happliy and the parent site can poll it in regular intervals and react to it...

Basically this provides a ground for communication for parent and child document which can be worked on. There are beautifully designed librarys for that! The javscript version of "log in with facebook" was based on the same principle!

What this means is that the child document has to cooperate with the parent, therefore it is intentional and both parties basically work together on the job.

So this is OK and it is ok that they work around the same origin policies.

Hope this covers your question in theory and gives you something to work with in praxis!

Have a nice day on SO :)

Get a value from Iframe into mainPage

1 Answers1