Как найти конкретный элемент внутри вложенных окон iframe
Мне нужно найти конкретный элемент, который находится внутри iframe, из родительского компонента, структура будет примерно такой: (Просто пример)
Edit: See comments below concerning the nature of this example
<iframe id ='if1'>
<iframe id ='if2'>
<iframe id ='if3'>
<iframe id ='if4'>
<input type='hidden' id ='elementToBeFound'>
</iframe>
</iframe>
</iframe>
</iframe>
Теперь, как я могу сделать это с помощью javascript? (Также может быть jquery или другой помощник)
У меня есть ссылка на первый iframe ('if1'), я хотел искать все дочерние узлы, пока не найду elementToBeFound.
Возможно ли это?
Заранее спасибо.
Мой вопрос отличается от существующих, потому что я хочу получить доступ к нескольким фреймам внутри iframe, а не только к одному уровню.
Это не сработает, все, что находится между тегами iframe, никогда не будет отображаться в современных браузерах. Кроме того, ни один из этих окон iframe не имеет атрибута src или srcdoc, что еще больше ухудшает его работу.
Возможный дубликат Поиск дочернего элемента из iFrame с помощью getElementById или другого метода?
@ zer00ne прав, iframe не отображается внутри другого iframe. Я только что нашел эту структуру в производстве (она должна была быть сгенерирована динамически с помощью src) и хотел найти элемент. В любом случае, я мог решить проблему, не имея к ней доступа, поэтому проблему удалось избежать.
Привет, @ EliâMelfior, рад, что ты решил проблему.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Я считаю, что что-то вроде этого должно работать:
const elem = document.getElementById('if1').contentDocument
.getElementById('if2').contentDocument
.getElementById('if3').contentDocument
.getElementById('if4').contentDocument
.getElementById('elementToBeFound')
Но для этого обязательно должны быть загружены все окна. На реальном рабочем месте это может быть сложнее, вам нужно будет прослушивать событие загрузки для каждого iframe, чтобы иметь возможность проверить, что находится внутри.
Вы можете получить элемент div с помощью вызова iframe.contentWindow.
Вот пример:
NOTE : You have to use "src" (external iframes) to make it work
<!DOCTYPE html>
<html>
<head>
<title>IF1</title>
</head>
<body>
<iframe id='if1' src = "./iframe2.html">
<!-- <iframe id='if2'>
<iframe id='if3'>
<iframe id='if4'> -->
<!-- <div id='elementToFind'>Hello</div> -->
<!-- </iframe>
</iframe>
</iframe> -->
</iframe>
<script>
window.onload = function() {
let if1 = document.getElementById('if1').contentWindow;
let if2 = if1.document.getElementById('if2').contentWindow;
let div = if2.document.getElementById('elementToFind');
console.info(div)
}
</script>
</body>
</html>
Вы можете использовать эту функцию для запроса любого элемента на странице, независимо от того, вложен ли он внутри iframe:
function querySelectorAllInIframes(selector) {
let elements = [];
const recurse = (contentWindow = window) => {
const iframes = contentWindow.document.body.querySelectorAll('iframe');
iframes.forEach(iframe => recurse(iframe.contentWindow));
elements = elements.concat(contentWindow.document.body.querySelectorAll(selector));
}
recurse();
return elements;
};
querySelectorAllInIframes('#elementToBeFound');
Примечание: Имейте в виду, что все фреймы iframe на странице должны быть одного и того же происхождения, иначе эта функция выдаст ошибку.
Вы хотите найти его по идентификатору? почему бы тебе не использовать getElementById?