Get value of input field inside an iframe

Question

I am creating a form with Javascript only. I am trying to use Javascript to get the value of the input field which is inside an iframe. Is it possible to get the value of a field that is inside an iframe?

Kisumu

can you show me some code? – Internuncial

That depends on whether the iframe is served from the same domain or not. – Madeira

Then you cannot access the content if the iframe. – Madeira

Yep: en.wikipedia.org/wiki/Same_origin_policy. Also worth a read: developer.mozilla.org/en-US/docs/JavaScript/…. – Madeira

Answer 1

If the framed site is on a different domain, you cannot directly read the value from the remote iframe. Even so, the answer is yes: It is still possible to get that value, by proxying the framed site through your own domain.

For example, in an HTML page on my site I have an iFrame whose contents are sourced from another website. The iFrame content is a single select field.

I need to be able to read the selected value on my site. In other words, I need to use the select list from another domain inside my own application. I do not have control over any server settings.

Initially therefore we might be tempted to do something like this (simplified):

HTML in my site:

<iframe name='select_frame' src='http://www.othersite.com/select.php?initial_name=jim'></iframe>
<input type='button' name='save' value='SAVE'>

HTML contents of iFrame (loaded from select.php on another domain):

<select id='select_name'>
    <option value='john'>John</option>
    <option value='jim' selected>Jim</option>
</select>

jQuery:

$('input:button[name=save]').click(function() {
    var name = $('iframe[name=select_frame]').contents().find('#select_name').val();
});

However, I receive this javascript error when I attempt to read the value:

Blocked a frame with origin "http://www.myownsite.com" from accessing a frame with origin "http://www.othersite.com". Protocols, domains, and ports must match.

To get around this problem, you can proxy the content at "http://www.othersite.com", hosting it instead on "http://www.myownsite.com". For example, if you are using PHP, have a PHP script that reads the contents from the other site using a method like file_get_contents() or curl etc.

So, create a script (for example: select_local.php in the current directory) on your own site with contents similar to this:

PHP content of select_local.php:

<?php
    $url = "http://www.othersite.com/select.php?" . $_SERVER['QUERY_STRING'];
    $html_select = file_get_contents($url);
    echo $html_select;
?>

Also modify the HTML to call this local (instead of the remote) script:

<iframe name='select_frame' src='select_local.php?initial_name=jim'></iframe>
<input type='button' name='save' value='SAVE'>

Now your browser should think that it is loading the iFrame content from the same domain.

Fantastically

For those reading this and thinking through this as I did, this does not allow for markup in relation to a particular user to be read if it requires authentication. For example, someone cannot hide an iframe on their page, request my Facebook page, and scrape info from it b/c my session information (cookie) isn't known by select_local.php (the non Facebook server) and it cannot impersonate my session with Facebook. – Orthogenic

But @Orthogenic according to Stefan select_local.php would be capable of passing the values from the input fields outside of the iFrame. And that's a vulnerability because if someone was able to load up facebook.com on facebookk.com in an iframe they could steal you credentials. – Relique

I like the way it turned out to be. :) – Shenyang

NO, its not possible. This answer is incorrect by stating that IT IS. This is a workaround, by using PHP. Based on JS/jQuery, this is NOT possible! – Cortneycorty

Answer 2

<iframe id="upload_target" name="upload_target">
    <textarea rows="20" cols="100" name="result" id="result" ></textarea>
    <input type="text" id="txt1" />
</iframe>

You can Get value by JQuery

$(document).ready(function(){
  alert($('#upload_target').contents().find('#result').html());
  alert($('#upload_target').contents().find('#txt1').val());
});

work on only same domain link

Melbamelborn

Answer 3

document.getElementById("idframe").contentWindow.document.getElementById("idelement").value;

Higginson

Browsers will prevent JavaScript from accessing a cross-origin frame. – Lemar

Answer 4

Without Iframe We can do this by JQuery but it will give you only HTML page source and no dynamic links or html tags will display. Almost same as php solution but in JQuery :) Code---

var purl = "http://www.othersite.com";
$.getJSON('http://whateverorigin.org/get?url=' +
    encodeURIComponent(purl) + '&callback=?',
    function (data) {
    $('#viewer').html(data.contents);
});

Captivity

Due to browser security restrictions, most Ajax requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol. – Moreland

This same thing can be achieved using a vanilla http request w/o having to result to an additional library as there is no benefit in this case. It still doesn't retrieve any dynamic content though and is not an answer to the question. – Oxy