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

Ответы:

382
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
источник
4
Отличный ответ. Знаете ли вы, что вы можете сделать: var innerDoc = iframe.contentDocument || iframe.contentWindow.document; // более читабельно и означает то же самое
Дэвид Снабел-Каунт
5
Я видел людей, смущенных этим больше, чем троичные операторы. Кажется, они не знают, что возвращается первый действительный.
geowa4
5
на самом деле, когда я отредактировал ответ, чтобы включить его, парень через плечо спросил меня, что он сделал ...
geowa4
12
Вероятно, лучше учить, чем использовать более сложный код для простоты :)
Дэвид Снабель-Каунт
1
@JellicleCat: Любой способ обойти это - «подделка межсайтовых запросов», также известная как атака «одним щелчком» или «сессия на сеансе»
CSharper
12

Не забудьте получить доступ к 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>
lukyer
источник
3
window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')

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

VishalDream
источник
5
Это вызов функции из iFrame, а не получение ссылки на элемент.
Ник Митчелл
3

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

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

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

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

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

SkuraZZ
источник
1

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

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

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

var el = document.getElementById("iframeId").contentWindow.functionNameToCall();
вытягивали
источник
0

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

Хосе V
источник
-3

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

let iframe = document.getElementById('frameId');
let innerDoc = iframe.contentDocument || iframe.contentWindow.document;
ашиш нагате
источник