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

Question

我在包含第二页的第一页上有一个 iframe。 iframe 没有 ID，因此我必须使用 javascript 为其分配一个 ID。分配 id 后，我尝试使用 javascript 单击其中包含值 'female' 的单选按钮。但是，当我这样做时，我在控制台中收到一条错误消息："ERROR: Execution of script 'categorize faces' failed! Cannot read property '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() or an Onevent Property.

将 iframe 的文档注册到单击事件

iframeDoc.addEventListener('click', eventHandler);

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

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

eventHandler() 通过 Event Object and then references the property Event.target。 event.target 是对点击标签的直接引用（例如单选按钮）。 .value属性后缀event.target得到被点击标签的值

---

iframe 动态插入 DOM

参见演示 2

当标签动态添加到 DOM 时，它无法注册到任何事件。解决方法是通过注册动态标签（例如 iframe）的祖先标签（例如 body）来使用 Event Delegation 模式。 eventHandler 必须 "drill down" 从父页面上的祖先标记进入 iframe 文档。有关可怕的详细信息，请参阅 Demo 2。

---

演示 1

静态 iframe

注意： 由于 SO 上的安全措施，iframe 已失效。此演示中的 iframe 使用 srcdoc 粗略表示 OP（O原始 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);
}