当页面位于 iframe 中时，无法使用 javascript 选择单选按钮

Question

我在包含第二页的第一页上有一个 iframe。 iframe 没有 id，所以我必须使用 javascript 为其分配一个。分配 ID 后，我尝试使用 javascript 单击其中包含值“女性”的单选按钮。但是，当我这样做时，我在控制台中收到一条错误消息：“错误：执行脚本'分类面孔'失败！无法读取属性'click' of null”。我做错了什么？

var myframe = document.getElementsByTagName("iframe")[0];
myframe.id = "newID";
document.getElementById("newID").contentWindow.document.querySelector("input[value='female']").click();

首页：

<iframe src="http://chatwithibot.com/test2.php"></iframe>

第二页：

<form action="/testx.php" method = "POST">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
<input type="submit" value="Submit">
</form> 

Answer 1

window.frames, .contentDocument, & .contentWindow.document

页面加载时存在 iframe（非动态）

见演示 1

假设我们引用页面上的第一个（或唯一一个）iframe：

window.frames[0]
document.getElementsByTagName('iframe')[0].contentDocument; // interchangeable
document.querySelector('iframe').contentWindow.document; // interchangeable

将上述示例中的任何三行之一存储到一个变量中，然后将该变量视为document。

var iframeDoc = window.frames[0];
var iframeInput = iframeDoc.querySelector('#input2');

简而言之，就是如何通过 iframe 以编程方式将标签从父页面访问到子页面。如果涉及用户交互，例如用户单击子页面的单选按钮，则应使用 .addEventListener() 或 Onevent Property 将 iframe 的文档注册到单击事件。

iframeDoc.addEventListener('click', eventHandler);

事件处理程序是在点击iframeDoc 时调用的函数。

function eventHandler(event) {
  console.log(event.target.value);
}

eventHandler() 传递 Event Object，然后引用属性 Event.target。 event.target 是对点击标签的直接引用（例如单选按钮）。 .value属性后缀为event.target，获取点击标签的值。

---

iframe 被动态插入到 DOM 中

见演示 2

当标签被动态添加到 DOM 时，它不能注册到任何事件。一种解决方法是通过注册动态标签（例如 iframe）的祖先标签（例如正文）来使用 Event Delegation 模式。 eventHandler 必须从父页面上的祖先标记“向下钻取” 到 iframe 文档中。请参阅演示 2 了解令人毛骨悚然的细节。

---

演示1

静态 iframe

注意：由于 SO 上的安全措施，iframe 被削弱。本演示中的 iframe 使用srcdoc 粗略表示 OP (Original Post) 代码的内容。

var xFrame = window.frames[0];

xFrame.onclick = extractValue;

function extractValue(e) {
  console.log(e.target.value);
}

<iframe srcdoc='<form action="/testx.php" method="POST"><input type="radio" name="gender" value="male"> Male<br><input type="radio" name="gender" value="female"> Female<br><input type="radio" name="gender" value="other"> Other<br><br><input type="submit" value="Submit"></form>'></iframe>

---

Plunker

演示 2

动态 iframe

注意：可以通过此Plunker

查看工作演示

/* 
|| This is to simulate the iframe being dynamically inserted into the DOM.
|| This is not required for OP (Original Post) specific circumstance.
*/
document.body.insertAdjacentHTML('afterbegin', `<iframe src='test2.html'></iframe>`);

/* BEGINNING OF REQUIRED CODE */
/*
|| Register the body to the click event
|| function extractValue() is the event handler called when body is clicked.
*/
document.body.addEventListener('click', extractValue);

/* Event Handler */
/*
|| Reference the Document Object inside iframe
|| Reference the form tag inside Document Object of iframe
|| Reference all radio buttons name='gender' in the form tag
|| Reference the selected radio button
|| Log the selected radio button's value
*/
function extractValue(e) {
  var xFrame = window.frames[0];
  var xForm = xFrame.forms[0];
  var xRads = xForm.elements['gender'];
  var selected = xRads.checked;
  console.log(selected.value);
}