Как получить доступ к содержимому iframe с помощью JavaScript/jQuery?

Question

Я хочу манипулировать HTML внутри iframe, используя jQuery.

Я думал, что смогу сделать это, установив контекст функции jQuery на документ iframe, что-то вроде:

$(function(){ //document ready
    $('some selector', frames['nameOfMyIframe'].document).doStuff()
});

Однако это, похоже, не срабатывает. Немного покопавшись, я заметил, что переменные в frames['nameOfMyIframe'] имеют значение undefined, если не подождать, пока iframe загрузится. Но когда iframe загружен, переменные становятся недоступными (я получаю ошибки типа permission denied).

Кто-нибудь знает обходное решение этой проблемы?

Answer 1

Конечно! Здесь перевод ответа на русский в стиле StackOverflow:

Если src iframe находится на другом домене, вы все равно можете это сделать. Вам нужно считать внешнюю страницу в PHP и вывести её с вашего домена. Вот как это можно сделать:

iframe_page.php

<?php
    $URL = "http://external.com";

    $domain = file_get_contents($URL);

    echo $domain;
?>

Далее, что-то вроде этого:

display_page.html

<html>
<head>
  <title>Тест</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>
$(document).ready(function(){   
    cleanit = setInterval("cleaning()", 500);
});

function cleaning(){
    if($('#frametest').contents().find('.selector').html() == "somthing"){
        clearInterval(cleanit);
        $('#selector').contents().find('.Link').html('ideate tech');
    }
}
</script>

<body>
<iframe name="frametest" id="frametest" src="http://yourdomain.com/iframe_page.php"></iframe>
</body>
</html>

Приведенный выше пример демонстрирует, как редактировать внешнюю страницу через iframe, избегая проблем с доступом и подобными ошибками.

Answer 2

При использовании iframe в JavaScript, вместо метода:

iframe.contentDocument

предпочтительнее использовать:

iframe.contentWindow.document

Причина этого заключается в том, что contentDocument не поддерживается в некоторых старых браузерах, тогда как contentWindow.document является более кроссбраузерным решением. Также, доступ к contentWindow.document более точно отражает объявленную спецификацию и предоставляет более широкий доступ к объекту окна iframe, что может быть полезно в некоторых сценариях.

Таким образом, если вам нужно гарантированно работать с документом внутри iframe, рекомендуется использовать iframe.contentWindow.document.

Answer 3

Этот способ кажется мне более чистым:

var $iframe = $("#iframeID").contents();
$iframe.find('selector');

Здесь мы сначала получаем содержимое iframe, а затем ищем нужный селектор внутри этого содержимого. Это позволяет избежать лишних обращений к DOM и делает код более читаемым.

Answer 4

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

Вы можете использовать следующий код:

$().ready(function () {
    $("#iframeID").on('load', function () { // Эта функция выполняется после завершения загрузки iframe
        $('some selector', frames['nameOfMyIframe'].document).doStuff();
    });
});

Таким образом, этот код решит проблему с «ещё не загружено», однако стоит учесть, что если вы загружаете страницу в iframe с другого домена, доступ к её содержимому будет ограничен из-за политик безопасности браузера (Same-Origin Policy).

Answer 5

Я предпочитаю использовать другой способ доступа к переменным в iframe. Из родительского окна вы можете получить доступ к переменной в дочернем iframe. Переменная $ — это также переменная, и вы можете получить к ней доступ, просто вызвав window.iframe_id.$.

Например, window.view.$('div').hide() — это скроет все элементы div в iframe с id 'view'.

Однако этот способ не работает в Firefox. Для лучшей совместимости следует использовать:

$('#iframe_id')[0].contentWindow.$

Этот метод гарантирует, что вы получите доступ к переменной $ в контексте iframe независимо от используемого браузера.

Как получить доступ к содержимому iframe с помощью JavaScript/jQuery?

5 ответ(ов)

iframe_page.php

display_page.html

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных