Невозможно выбрать переключатель с помощью JavaScript, когда страница находится в iframe - PullRequest
Новая
       14

Невозможно выбрать переключатель с помощью JavaScript, когда страница находится в iframe

0 голосов
/ 27 января 2019

У меня есть iframe на первой странице, который содержит вторую страницу.У iframe нет идентификатора, поэтому я должен назначить его с помощью javascript.После того, как я назначил идентификатор, я пытаюсь использовать javascript, чтобы щелкнуть переключатель, в котором есть значение «женский».Однако, когда я это делаю, в консоли появляется сообщение об ошибке: «ОШИБКА: сбой выполнения скрипта« классифицировать лица »! Невозможно прочитать свойство« click »из 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>

1 Ответ

0 голосов
/ 27 января 2019

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. Если вмешательство пользователя связано с тем, что пользователь нажимает переключатель на дочерней странице, тогда документ iframe должен быть зарегистрирован в событии click с использованием .addEventListener() или Свойство Onevent . 

iframeDoc.addEventListener('click', eventHandler);

Обработчик событий - это функция, вызываемая при нажатии iframeDoc. 

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

eventHandler() передает Объект события и затем ссылается на свойство Event.target . event.target - это прямая ссылка на нажатый тег (например, переключатель). Свойство .value имеет суффикс к event.target, чтобы получить значение тега, по которому щелкнули.

Iframe динамически вставляется в DOM

См. Демо 2

Когда тег динамически добавляется в DOM, он не может быть зарегистрирован ни для какого события. Обходной путь должен использовать шаблон Делегирование событий путем регистрации тега предка (ex. Body) динамического тега (ex. Iframe). EventHandler должен "развернуть" в документ iframe из тега предка на родительской странице. См. Демо 2 для ужасных деталей.

Демо 1

Статический Iframe

Примечание: из-за мер безопасности на SO, кадры iframed. В этом демонстрационном примере iframe использует srcdoc для приблизительного представления кода OP ( O riginal 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

Динамический фрейм

Примечание: рабочую демонстрацию можно посмотреть на этом Плункер 

/* 
|| 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);
}
...