Вопрос по html, iframe, javascript – Получить элемент из iFrame

198

Как ты получаешь<div> изнутри<iframe>?

Ваш Ответ

6   ответов
6

Не забудьте получить доступ к iframe после загрузки. Старый, но надежный способ без jQuery:

<iframe src="samedomain.com/page.htm" id="iframe" onload="access()"></iframe>

<script>
function access() {
   var iframe = document.getElementById("iframe");
   var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
   console.log(innerDoc.body);
}
</script>
-1

Ниже код поможет вам узнать данные iframe.

let iframe = document.getElementById('frameId');
let innerDoc = iframe.contentDocument || iframe.contentWindow.document;
3
window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')

CallYourFunction() - это функция внутри страницы, и эта функция воздействует на нее

Это вызывает функцию из iFrame, но не получает ссылку на элемент. Nick Mitchell
1

ое решение jQuery:

$('#iframeId').contents().find('div')

Хитрость в том, что jQuery's.contents() метод, в отличие от.children() который может получить только элементы HTML,.contents() может получить как текстовые узлы, так и элементы HTML. Вот почему с его помощью можно получить содержимое документа iframe.

Дальнейшее чтение о jQuery.contents(): .Contents ()

Заметк что iframe и страница должны быть в одном домене.

333
var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

Ты мог бы проще написать:

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

и будет возвращен первый действительный внутренний документ.

Как только вы получите внутренний документ, вы можете просто получить доступ к его внутренним документам так же, как и к любому элементу на текущей странице. innerDoc.getElementById...так далее.

ВАЖНЫЙ Убедитесь, что iframe находится в одном домене, иначе вы не сможете получить доступ к его внутренним объектам. Это будет межсайтовый скриптинг.

Я видел людей, смущенных этим больше, чем троичные операторы. Кажется, они не знают, что возвращается первый действительный. geowa4
Возможно, лучше учить, чем использовать более сложный код для простоты:) David Snabel-Caunt
Да, я знал об этом. geowa4
На самом деле, когда я отредактировал ответ, чтобы включить его, парень через плечо спросил меня, что он сделал ... geowa4
Отличный ответ. Знаете ли вы, что вы можете сделать: var innerDoc = iframe.contentDocument || iframe.contentWindow.document; // более читабельно и означает то же самое David Snabel-Caunt
1

что создал в своем iframe функцию, которая возвращает искомый объект:

function getElementWithinIframe() {
    return document.getElementById('copy-sheet-form');
}

Затем вы вызываете эту функцию, чтобы получить элемент:

var el = document.getElementById("iframeId").contentWindow.functionNameToCall();

Похожие вопросы