访问 html 表单元素，在 iframe 内没有 id/name答案

【问题标题】：Access html form element, inside iframe without id/name访问 html 表单元素，在 iframe 内没有 id/name
【发布时间】：2016-08-06 22:08:49
【问题描述】：

我有以下代码结构（嵌套的 HTML，虽然这可能没有太大区别）

<html>
    <body>
        <iframe>
            <html>
                <form id="loginForm" name ="loginFormName">
                    <input id ="name" name ="username">
                    </input>
                </form>
            </html>
        </iframe>
    </body>
</html

我尝试通过以下方式访问输入字段：

document.getElementById("name");
document.loginFormName.username;

但我相信 iFrame 会阻碍我访问元素。但是，以某种方式首先访问 iFrame：

document.getElementByTagName("iframe).getElementById("name");

不会产生除“未定义”以外的任何结果。

非常感谢您的帮助，我想自动设置输入字段的值并自动提交表单。（表格提交）。我对 Javascript 或 JQuery 没有偏好。

【问题讨论】：

document.getElementById("name").value() 试试这个，因为你想从输入字段中获取值
是的，我知道，最终我将需要 .value。问题是我一开始就无法访问该对象。
由于您使用第三方作为 iframe 的来源，您可以发布您正在处理的确切代码吗？

标签： javascript jquery html forms iframe

【解决方案1】：

您可以为此使用.contents()。

contents() 方法查找匹配元素（包括文本节点）或内容文档（如果元素是 iframe）内的所有子节点。

$('iframe').contents().find('input')

如果你想提交表单，你可以使用这个。

$('iframe').contents().find('form').submit();

Fiddle demo 示例以显示 contents( ) 如何访问 iframe 中的内容。

【讨论】：

你是在控制台中运行的吗？确保在 iframe 加载后运行它
嗨@RinoRaj。感谢您的演示和 JQuery。就我而言，有多个输入字段，所以我首先想看看查询是否返回任何内容：var counter = $('iframe').contents().find('input'); 但是`counter.length`显示为0？ .length 在这里不适用吗？我是否可以通过以下方式访问找到的第一个输入字段：`$('iframe').contents().find('input')[0];?`
我在网站上将计数器显示为 element.innerHTML= counter.length iframe 通过 JS API 加载，但我的代码位于页面的最底部，就在

【解决方案2】：

访问 iframe 的元素非常容易。

您应该使用以下语法来访问输入元素和表单提交：

$('iframe').contents().find('input'); //Form Element access

$('iframe').contents().find('#loginForm').submit(); //Form submit code

希望它有助于解决您的问题！

【讨论】：

【解决方案3】：

如果您的 iframe 与您的父页面在同一个域中，您可以使用 document.frames 集合访问元素。

为您的 iFrame 提供任何 id 并将 myIFrame 替换为您的 iFrame id

window.frames['myIFrame'].document.getElementById('name')

如果您的 iframe 不在同一个域中，则出于安全原因，浏览器应阻止此类访问。

【讨论】：

【解决方案4】：

问题是您的 iframe 加载不正确。

  <div class="main">
    <iframe src="iframecontent.html">
    </iframe>
  </div>


  <!--iframecontent.html :-->

  <html>
  <body>
      <form id="loginForm" name ="loginFormName">
          <input id ="name" name ="username">
          </input>
      </form>
    </body>
  </html>

【讨论】：

然后执行 var counter = $('iframe').contents().find('input'); 并注销 counter.length
在我的示例中，我过多地降低了语法的简单性。 iframe 就是这样调用的，但是 iFrame 本身又来自第三方 API，因此我无法更改它的结构。不幸的是，上面提到的 JQuery 仍然没有产生任何结果。