29

我正在创建一个仅使用 Javascript 的表单。我正在尝试使用 Javascript 来获取iframe. 是否可以获得内部字段的值iframe？

4

4 回答 4

35

如果框架站点位于不同的域中，则无法直接从远程 iframe 读取值。即便如此，答案是肯定的：通过您自己的域代理框架站点，仍然可以获得该值。

例如，在我网站的 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”的框架。协议、域和端口必须匹配。

要解决此问题，您可以代理“http://www.othersite.com”上的内容，将其托管在“http://www.myownsite.com”上。例如，如果您使用的是 PHP，则有一个 PHP 脚本，该脚本使用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 内容。

于 2013-06-23T15:33:13.067 回答
6 
<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());
});

仅在同一域链接上工作

于 2013-02-21T12:51:32.353 回答
6 
document.getElementById("idframe").contentWindow.document.getElementById("idelement").value;
于 2016-03-31T08:45:33.123 回答
1

没有 iframe 我们可以通过 JQuery 来做到这一点，但它只会为您提供 HTML 页面源，并且不会显示动态链接或 html 标记。几乎与 php 解决方案相同，但在 JQuery 中:) 代码---

var purl = "http://www.othersite.com";
$.getJSON('http://whateverorigin.org/get?url=' +
    encodeURIComponent(purl) + '&callback=?',
    function (data) {
    $('#viewer').html(data.contents);
});
于 2016-02-26T08:00:23.537 回答