获取iframe中输入字段的值

Question

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

Answer 1

是的,它应该是可能的,即使该站点来自另一个域.

例如,在我网站上的HTML页面中,我有一个iFrame,其内容来自其他网站.iFrame内容是单个选择字段.

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

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

我网站上的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.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内容.

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>

您可以通过 JQuery 获取价值

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

仅在同一个域链接上工作

Answer 3

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