获取iframe中input字段的值

我只用Javascript创build一个表单。 我正在尝试使用Javascript来获取iframe中的input字段的值。 是否有可能获得在iframe中的字段的值?

是的,即使该网站来自另一个域名,也应该可以。

例如,在我网站的HTML页面中,我有一个iFrame,其内容来自另一个网站。 iFrame内容是一个单一的select字段。

我需要能够读取我的网站上选定的值。 换句话说,我需要使用我自己的应用程序中的另一个域的select列表。 我无法控制任何服务器设置。

因此,最初我们可能会试图做这样的事情(简化):

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加载):

 <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错误:

阻止来源“ http://www.mysite.com ”的框架访问来自“ http://www.othersite.com ”的框架。 协议,域和端口必须匹配。

为了解决这个问题,似乎你可以从你自己的站点脚本中间接获取iFrame,并且让脚本使用file_get_contents()curl等方法从其他站点读取内容。

因此,在您自己的网站上创build一个脚本(例如:当前目录中的select_local.php ),内容类似于:

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内容。

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

你可以通过JQuery获得价值

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

仅在同一个域名链接上工作

没有Iframe我们可以通过JQuery做到这一点,但它会给你只有HTML页面源,并没有dynamic链接或HTML标签将显示。 几乎相同的PHP解决scheme,但在JQuery :)代码—

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