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 ，并让该脚本使用类似{{的方法从其他网站读取内容1}}或file_get_contents()等。

因此，在您自己的网站上创建一个脚本（例如：当前目录中的curl），内容与此类似：

select_local.php的PHP内容：

select_local.php

同时修改HTML以调用此本地（而不是远程）脚本：

<?php $url = "http://www.othersite.com/select.php?" . $_SERVER['QUERY_STRING']; $html_select = file_get_contents($url); echo $html_select; ?>

现在，您的浏览器应该认为它正在加载来自同一域的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;

Answer 4

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

public

获取iframe中输入字段的值

4 个答案: