访问 html 表单元素，在 iframe 内没有 id/name
Posted
技术标签:
【中文标题】访问 html 表单元素，在 iframe 内没有 id/name【英文标题】：Access html form element, inside iframe without 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 的来源，您可以发布您正在处理的确切代码吗？ 【参考方案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 仍然没有产生任何结果。以上是关于访问 html 表单元素，在 iframe 内没有 id/name的主要内容，如果未能解决你的问题，请参考以下文章
python+selenium2自动化---多表单多窗口切换
使用 Java 和 Selenium WebDriver 在表单和 iframe 中查找元素