获取 iframe 内输入字段的值

Posted 2023-03-05

【中文标题】获取 iframe 内输入字段的值

【英文标题】：Get value of input field inside an iframe

【发布时间】：2013-02-06 19:12:13

【问题描述】：

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

【问题讨论】：

你能给我看一些代码吗？

这取决于iframe 是否来自同一个域。

如果iframe，则无法访问内容。

是的：en.wikipedia.org/wiki/Same_origin_policy。也值得一读：developer.mozilla.org/en-US/docs/JavaScript/….

【参考方案1】：

如果框架站点位于不同的域中，则无法直接从远程 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，请使用诸如 file_get_contents() 或 curl 等方法从其他站点读取内容的 PHP 脚本。

所以，在你自己的网站上创建一个脚本（例如：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、请求我的 Facebook 页面并从中获取信息 b/c 我的会话信息 (cookie) 不为 select_local.php（非 Facebook 服务器）所知，并且它无法模拟我的与 Facebook 的会话。

但根据 Stefan select_local.php 的说法，@butallmj 将能够从 iFrame 之外的输入字段传递值。这是一个漏洞，因为如果有人能够在 facebookk.com 上的 iframe 中加载 facebook.com，他们可能会窃取您的凭据。

我喜欢它原来的样子。 :)

不，不可能。通过说明它是，这个答案是不正确的。这是一种解决方法，通过使用 PHP。基于JS/jQuery，这是不可能的！

@Stefan 好吧，我在这个话题上花了 5 个小时。想法是从嵌入视频页面获取内容。因为流将仅在主机域上创建。因此，为了启动一个有效的会话令牌，我计划制作一个假 iframe 并从中获取内容。这是不可能的。我真的不再需要那个解决方案了，但是如果你能弄清楚，如何从 iframe 获取内容，即来自其他域的内容.. 仅使用 JS/jQuery，我会给你买两箱啤酒。

【参考方案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());
);

只在同一个域链接上工作

【参考方案3】：

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

【讨论】：

浏览器会阻止 JavaScript 访问跨域框架。

【参考方案4】：

如果没有 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);
);

【讨论】：

由于浏览器的安全限制，大部分Ajax请求都遵循同源策略；请求无法从不同的域、子域、端口或协议成功检索数据。

同样的事情可以使用一个普通的 http 请求来实现，而不必产生额外的库，因为在这种情况下没有任何好处。但它仍然没有检索任何动态内容，也不是问题的答案。