Html 获取 iframe 内输入字段的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15002652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get value of input field inside an iframe
提问by Muhammad Talha Akbar
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?
我仅使用 Javascript 创建表单。我正在尝试使用 Javascript 来获取iframe. 是否可以获取iframe?内的字段的值？
回答by Stefan
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.
例如，在我网站的 HTML 页面中，我有一个 iFrame，其内容来自另一个网站。iFrame 内容是单个选择字段。
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:
我网站中的 HTML：
<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.phpon another domain):
iFrame 的 HTML 内容（从select.php另一个域加载）：
<select id='select_name'>
<option value='john'>John</option>
<option value='jim' selected>Jim</option>
</select>
jQuery:
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:
但是，当我尝试读取值时收到此 javascript 错误：
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.
封闭原点“的帧http://www.myownsite.com访问的帧与原籍”“ http://www.othersite.com”。协议、域和端口必须匹配。
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 curletc.
为了解决这个问题，似乎可以间接源的iFrame在自己的网站从脚本，并让该脚本使用的方法一样，从其他网站读取其中的内容file_get_contents()或curl等。
So, create a script (for example: select_local.phpin the current directory) on your own site with contents similar to this:
因此，select_local.php在您自己的站点上创建一个脚本（例如：在当前目录中），其内容类似于：
PHP content of 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;
?>
Also modify the HTML to call this local (instead of the remote) script:
还要修改 HTML 以调用此本地（而不是远程）脚本：
<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 内容。
回答by Harshit Tailor
<iframe id="upload_target" name="upload_target">
<textarea rows="20" cols="100" name="result" id="result" ></textarea>
<input type="text" id="txt1" />
</iframe>
You can Get value by JQuery
您可以通过 JQuery 获取价值
$(document).ready(function(){
alert($('#upload_target').contents().find('#result').html());
alert($('#upload_target').contents().find('#txt1').val());
});
work on only same domain link
仅在同一个域链接上工作
回答by Mahdi Dhifi
document.getElementById("idframe").contentWindow.document.getElementById("idelement").value;
回答by Manish Shukla
Without Iframe We can do this by JQuery but it will give you only HTML page source and no dynamic links or html tags will display. Almost same as php solution but in JQuery :) Code---
没有 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);
});
