获取iframe中输入字段的值 [英] Get value of input field inside an iframe

问题描述

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

解决方案

是的，它应该是可能的，即使该网站来自另一个域。

例如，在我网站的HTML页面中，我有一个iFrame，其内容来源于另一个网站。 iFrame内容是单个选择字段。

我需要能够读取我网站上的选定值。换句话说，我需要在我自己的应用程序中使用来自其他域的选择列表。我无法控制任何服务器设置。

最初，我们可能会试图做这样的事情（简化）：

我的站点中的HTML：

 < iframe name ='select_frame'src = 'HTTP：//www.othersite.com/select.php initial_name =吉姆' >< / iframe中> 
< input type ='button'name ='save'value ='SAVE'> 
  

iFrame的HTML内容（从 select.php <
$ b

 < select id ='select_name'> code>在另一个域名上）： 
< 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.myownsite.com 通过访问原始帧 http://www.othersite.com 。协议，域和端口必须匹配。

为了解决这个问题，您似乎可以间接从脚本中获取iFrame 您的网站，并让该脚本使用像 file_get_contents（）或 curl 等等。

因此，在当前目录下创建一个脚本（例如： 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内容。

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?

解决方案

Yes it should be possible, even if the site is from another 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, it seems that you can indirectly source the iFrame from a script in your own site, and have that script read 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.

这篇关于获取iframe中输入字段的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！