获取 iframe 内输入字段的值 [英] Get value of input field inside an iframe
问题描述
我仅使用 Javascript 创建表单.我正在尝试使用 Javascript 来获取 iframe
内的输入字段的值.是否可以获取 iframe
内的字段的值?
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
?
推荐答案
如果框架站点位于不同的域中,则您无法直接从远程 iframe 读取值.即便如此,答案是肯定的:通过您自己的域代理框架站点,仍然可以获得该价值.
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.
例如,在我网站的 HTML 页面中,我有一个 iFrame,其内容来自另一个网站.iFrame 内容是单个选择字段.
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:
<iframe name='select_frame' src='http://www.othersite.com/select.php?initial_name=jim'></iframe>
<input type='button' name='save' value='SAVE'>
iFrame 的 HTML 内容(从另一个域上的 select.php
加载):
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();
});
但是,当我尝试读取值时收到此 javascript 错误:
However, I receive this javascript error when I attempt to read the value:
阻止了一个来源为http://www.myownsite.com"的框架;访问带有http://www.othersite.com"的框架.协议、域和端口必须匹配.
要解决此问题,您可以代理http://www.othersite.com"上的内容,将其托管在http://www.myownsite.com"上.例如,如果您使用的是 PHP,请使用一个 PHP 脚本,使用 file_get_contents()
或 curl
等方法从其他站点读取内容.
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.
因此,在您自己的站点上创建一个脚本(例如:当前目录中的select_local.php
),内容类似于:
So, create a script (for example: select_local.php
in the current directory) on your own site with contents similar to this:
select_local.php 的 PHP 内容:
<?php
$url = "http://www.othersite.com/select.php?" . $_SERVER['QUERY_STRING'];
$html_select = file_get_contents($url);
echo $html_select;
?>
还要修改 HTML 以调用这个本地(而不是远程)脚本:
<iframe name='select_frame' src='select_local.php?initial_name=jim'></iframe>
<input type='button' name='save' value='SAVE'>
现在您的浏览器应该认为它正在加载来自同一域的 iFrame 内容.
Now your browser should think that it is loading the iFrame content from the same domain.
这篇关于获取 iframe 内输入字段的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!