我仅使用 Javascript 创建表单。我正在尝试使用 Javascript 来获取iframe. 是否可以获取iframe?内的字段的值？
获取 iframe 内输入字段的值
IT技术
javascript
html
iframe
2021-01-28 01:50:17
4个回答
是的，即使该站点来自另一个域，也应该是可能的。
例如，在我网站的 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 内容。
<iframe id="upload_target" name="upload_target">
<textarea rows="20" cols="100" name="result" id="result" ></textarea>
<input type="text" id="txt1" />
</iframe>
您可以通过 JQuery 获取value
$(document).ready(function(){
alert($('#upload_target').contents().find('#result').html());
alert($('#upload_target').contents().find('#txt1').val());
});
仅在同一个域链接上工作
document.getElementById("idframe").contentWindow.document.getElementById("idelement").value;
没有 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);
});