Получить элемент из iFrame

Как вы получаете <div> из <iframe>?

ОТВЕТЫ

Ответ 1

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 находится в одном домене, иначе вы не сможете получить доступ к его внутренним компонентам. Это будет межсайтовый скриптинг.

Ответ 2

Не забудьте получить доступ к 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>

Ответ 3

window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')

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

Ответ 4

Выше ответы дали хорошие решения с использованием Javscript. Вот простое решение jQuery:

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

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

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

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

Ответ 5

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

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

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

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

Ответ 6

Если iframe не находится в том же домене, что вы не можете получить доступ к его внутренним элементам от родителя, но вы можете изменить исходный код iframe, тогда вы можете изменить страницу, отображаемую в iframe, для отправки сообщений в родительское окно, что позволяет вам поделиться информацией между страницами. Некоторые источники:

Ответ 7

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

let iframe = document.getElementById('frameId');
let innerDoc = iframe.contentDocument || iframe.contentWindow.document;