Получение содержимого body в iframe через JavaScript

Быстрый ответ

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

let iframeDocument = document.getElementById('yourIframeId').contentDocument;
let iframeContent = iframeDocument.body.innerHTML;  // Получаем нужное содержимое!

Важно помнить, что iframe должен быть полностью загружен до того, как вы обратитесь к его содержимому:

document.getElementById('yourIframeId').onload = function() {
    let iframeContent = this.contentDocument.body.innerHTML;  // Теперь можно приступить к работе...
};

Выбор элементов внутри iframe

Теперь, когда доступ получен, можно выбрать элементы внутри iframe следующим образом:

let iframeDocument = document.getElementById('yourIframeId').contentDocument;
let soloElement = iframeDocument.getElementById('oneRing');  // Мы нашли "Одно кольцо"...
let groupElements = iframeDocument.querySelectorAll('.theySeeMeRollin');  // И все остальные элементы...

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

let iframeWindow = document.getElementById('yourIframeId').contentWindow;
let justHangin = iframeWindow.someGlobalFunction();  // Глобальная функция выполняет свою работу...

Работа с различными браузерами

У каждого браузера есть свои особенности. Чтобы обеспечить идеальную совместимость, выполните следующие действия:

• Используйте iframe.contentDocument в современных браузерах, например, в Firefox.
• Воспользуйтесь iframe.contentWindow.document для Internet Explorer.

Следующий универсальный подход подойдет для любого браузера:

let iframe = document.getElementById('yourIframeId');
let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
let iframeBody = iframeDocument.body.innerHTML;  // Теперь мы взаимодействуем со всеми браузерами.

Без iframe? Никаких проблем

Если iframe не отображается, вашему коду это никак не помешает. Вот как можно решить данную задачу:

let iframe = document.getElementById('yourIframeId');
if (iframe) {
    let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    if (iframeDocument) {
        let iframeContent = iframeDocument.body.innerHTML;  // Мы получили доступ к содержимому  iframe!
        // Продолжаем выполнение кода...
    }
}

Упрощаем процесс с помощью jQuery

Если на странице или внутри iframe имеется поддержка jQuery, задача заметно упростится:

let iframeContent = $("#yourIframeId").contents().find("body").html();  // Решение элегантно и с помощью jQuery!

Тем не менее, удостоверьтесь, что jQuery действительно подключен к вашему проекту!

Визуализация

<iframe> : [👀 Что скрыто за рамкой?]

Откройте для себя все тайны, скрытые за границами iframe, с помощью JavaScript:

var iframeWindow = document.querySelector('iframe').contentWindow;
var iframeBody = iframeWindow.document.body; // 👀🎉 И весь мир перед вами!

🖼️ До: Видим только рамку iframe без деталей.
🎉 После: Весь мир на ладони, теперь доступна вся информация!

Обход политики одного происхождения

Политика одного происхождения подобна стражу порядка во всем интерактиве с iframe. Чтобы получить содержимое с другого домена, обязательно нужно следовать данным правилам, иначе браузер черкнет вашу идею: "Не сегодня, мой друг!"

Рискованные игры с безопасностью: в ущерб полезности

Желаете ли вы немного поиграть с содержимым iframe, рискуя безопасностью? Необходимо быть крайне осторожным, так как при нарушении политики безопасности доменов вас может ожидать неприятные последствия. Перед тем как принять вызов, убедитесь, что вы осознаёте все возможные последствия!

Полезные материалы

1. Политика одного источника – Безопасность в сети | MDN — здесь представлена полная информация о политике одного происхождения.
2. <iframe>: Элемент встроенного фрейма – HTML | MDN — подробное руководство по использованию элемента iframe.
3. HTML DOM IFrame Objects — учебник, разъясняющий различные трюки при работе с iframe.
4. SecurityError: Блокировка фрейма источника от доступа к фрейму другого происхождения – Stack Overflow — обсуждение возможных решений проблемы с доступом к содержимому iframe из других доменов.
5. GitHub – davidjbradshaw/iframe-resizer — инструмент для автоматического изменения размеров iframe в зависимости от содержимого.
6. .contents() | jQuery API Documentation — описание метода contents() библиотеки jQuery, позволяющего управлять содержимым iframe.
7. CodePen — замечательное место для экспериментирования с доступом к контенту iframe.