Запись элементов в дочерний iframe с помощью Javascript или jQuery

Question

Описание проблемы

У меня есть следующий HTML-код:

<!doctype html>
<html>
  <body>
     <iframe id="someFrame"></iframe>
  </body>
</html>

Я хочу использовать jQuery, чтобы добавить элементы внутрь iframe таким образом, чтобы конечный HTML выглядел следующим образом:

<!doctype html>
<html>
  <body>
    <iframe id="someFrame">
      <!-- содержимое iframe -->
      <!-- <html><body>  -->
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <!-- </body></html> -->
    </iframe>
  </body>
</html>

В качестве альтернативы подойдет любое стандартное решение на JavaScript.

Спасибо.

Правка: После небольшого исследования, похоже, что я ищу эквивалент свойства contentDocument для iframe в Internet Explorer. "contentDocument" является стандартом W3C, который поддерживается Firefox, но не поддерживается IE. (Неожиданно, правда?)

Answer 1

Вы можете сделать и то, и другое, просто необходимо по-разному нацелиться:

var ifrm = document.getElementById('myIframe');
ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();

В данном коде мы сначала получаем элемент iframe по его идентификатору. Затем, чтобы получить доступ к его содержимому, используем разные свойства, в зависимости от того, что доступно. После этого мы открываем документ, записываем в него текст "Hello World!" и закрываем документ. Убедитесь, что iframe загружен и разрешает доступ к своему содержимому, иначе у вас могут возникнуть проблемы с совместимостью или безопасности.

Answer 2

После некоторых исследований и подтверждающего ответа от Майка, я нашел следующее решение:

var d = $("#someFrame")[0].contentWindow.document; // contentWindow работает в IE7 и FF
d.open(); d.close(); // необходимо открыть и закрыть объект документа, чтобы начать его использовать!

// теперь можно использовать обычный jQuery:
$("body", d).append("<div>A</div><div>B</div><div>C</div>");

Данный код позволяет взаимодействовать с документом внутри iframe, используя jQuery. Обратите внимание, что вызов d.open() и d.close() необходим для инициализации документа, прежде чем вы сможете производить с ним какие-либо действия.

Answer 3

Я рискну предположить, что предложенные до этого ответы не совсем корректны.

Если этот iframe действительно имеет атрибут src="somepage.html" (что вам следовало бы указать, иначе для чего использовать iframe?), то я не думаю, что jQuery может напрямую манипулировать HTML между фреймами во всех браузерах. По моему опыту, родительская страница не может напрямую вызывать функции или осуществлять какой-либо JavaScript-контакт со страницей внутри iframe.

Ваша страница "somepage.html" (которая загружается в iframe) должна сделать две вещи:

Передать некий объект на родительскую страницу, который можно использовать как мост.
Иметь функцию для установки HTML так, как вы этого хотите.

Например, "somepage.html" может выглядеть следующим образом:

<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<script language="JavaScript">
//<![CDATA[
    var bridge = {
        setHtml: function(htm) {
            document.body.innerHTML = htm;
        }
    }

    $(function() { parent.setBridge(bridge); });
//]]>
</script>
</head>
<body></body>
</html>

А родительская страница может выглядеть так:

<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<script language="JavaScript">
//<![CDATA[
var bridge;
var setBridge = function(br) {
    bridge = br;
    bridge.setHtml("<div>A</div><div>B</div><div>C</div>");
}
//]]>
</script>
</head>
<body><iframe src="somepage.html"></iframe></body>
</html>

Это может показаться немного запутанным, но такой подход можно адаптировать в различных направлениях, и он должен работать как минимум в IE, Firefox, Chrome, а также, вероятно, в Safari и Opera.

Answer 4

Вы можете использовать следующий фрагмент кода для управления содержимым iFrame при скачивании отчёта и обработке сообщений об ошибках. Я постараюсь объяснить, как это работает, чтобы это было совместимо с разными браузерами.

У вас есть iFrame, который вы используете для отображения сообщений об ошибках или загрузки отчёта. При этом вам нужно очистить содержимое iFrame каждый раз, когда пользователь нажимает кнопку для скачивания отчёта, чтобы избежать ситуации, когда iFrame остаётся пустым, если результаты отсутствуют.

Ваш код выглядит практически правильно, однако есть некоторые улучшения, которые вы можете сделать:

var $frm = $("#reportIFrame");
var $doc = $frm[0].contentWindow ? $frm[0].contentWindow.document : $frm[0].contentDocument;
var $body = $($doc.body);

// Очистка содержимого iFrame и добавление временного сообщения
$body.html(''); 
$body.append('<i>Writing into the iFrame...</i>');

// Открытие отчёта для скачивания
window.open(Module.PATH + 'php/getReport.php' + Report.queryData, 'reportIFrame');

Этим способом вы очищаете содержимое iFrame и добавляете временное сообщение перед тем, как инициировать загрузку. Но как быть с совместимостью браузеров?

Если ваш код работает в современных браузерах, это уже неплохо. Однако некоторые старые версии браузеров могут не поддерживать contentDocument. Если вам нужно это проверить, вы можете предложить пользователям, пожалуйста, протестировать ваш код и оставить комментарии о совместимости.

Также стоит учитывать, что вы можете обновлять содержимое iFrame для отображения сообщений об ошибках, если результат от сервера не успешен (например, статусы 4xx или 5xx). Это можно сделать, обработав ответ от AJAX-запросов или непосредственно от сервера.

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

Запись элементов в дочерний iframe с помощью Javascript или jQuery

Описание проблемы

4 ответ(ов)

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

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

Код

Списки

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

Популярные

Другие .NET

Базы данных