Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
48
rated 0 times [  50] [ 2]  / answers: 1 / hits: 126450  / 12 Years ago, thu, february 21, 2013, 12:00:00

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?


More From » html

 Answers
10

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.


[#80084] Wednesday, February 20, 2013, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
taliac

Total Points: 84
Total Questions: 114
Total Answers: 114

Location: Morocco
Member since Fri, May 22, 2020
4 Years ago
taliac questions
Sun, Mar 21, 21, 00:00, 3 Years ago
Tue, May 12, 20, 00:00, 4 Years ago
Mon, Jan 13, 20, 00:00, 4 Years ago
;