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

Question

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

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的文档注册到click事件中。 / p>

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（ O 原始 P ost）代码的含义。

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);
}