Получение html-содержимого iframe с помощью jQuery

В настоящее время я пытаюсь немного настроить OpenCms (основанный на Java CMS с открытым исходным кодом), который использует встроенный FCKEditor, к которому я пытаюсь получить доступ, используя js/jQuery.

Однако я пытаюсь получить html-содержимое iframe, всегда возвращая значение null. Вот как я пытаюсь извлечь html-контент из iframe:

var editFrame = document.getElementById('ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame');
alert( $(editFrame).attr('id') );         // returns the correct id
alert( $(editFrame).contents().html() );  // returns null (!!)

Глядя на скриншот, я хочу получить доступ к html-разделу LargeNews1/Teaser, который в настоящее время содержит значения "Newsline en...". Ниже вы также можете увидеть структуру HTML в Firebug.

Однако $(editFrame).contents().html() возвращает ноль, и я не могу понять, почему, тогда как $(editFrame).attr('id') возвращает правильный идентификатор.

Контент iframe/FCKEditor находится на том же сайте/домене, межсайтовые проблемы отсутствуют.

HTML-код iframe находится на http://pastebin.com/hPuM7VUz

Обновлено:

вот решение, которое работает:

var editArea = document.getElementById('ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame').contentWindow.document.getElementById('xEditingArea');                        
$(editArea).find('iframe:first').contents().find('html:first').find('body:first').html('some <b>new</b><br/> value');

Ответы

Ответ 1

.contents(). html() не работает, чтобы получить html-код iframe. Вы можете сделать следующее:

$(editFrame).contents().find("html").html();

Это должно вернуть все html в iframe для вас. Или вы можете использовать "тело" или "голова" вместо "html", чтобы получить эти разделы.

Ответ 2

вы можете получить контент как

$('#iframeID').contents().find('#someID').html();

но кадр должен находиться в том же домене, что и http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

Ответ 3

Я предлагаю заменить первую строку:

  var editFrame = $('#ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame');

... и второе выражение предупреждения с помощью:

  editFrame.html()

Если, с другой стороны, вы предпочитаете делать то же самое без jQuery (гораздо более холодное, IMHO), можно использовать только JavaScript:

  var editFrame = document.getElementById('ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame');
  alert(editFrame.innerHTML);

Ответ 4

Я думаю, что FCKEditor имеет свой собственный API, см. http://cksource.com/forums/viewtopic.php?f=6&t=8368

Ответ 5

Ваш iframe:

<iframe style="width: 100%; height: 100%;" frameborder="0" aria-describedby="cke_88" title="Rich text editor, content" src="" tabindex="-1" allowtransparency="true"/>

Мы можем получить данные из этого iframe как:

var content=$("iframe").contents().find('body').html();
alert(content);

Ответ 6

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

$("#iframeId").contents().find("html").html()

Для меня это работало намного лучше, и я смог извлечь весь контент <html>...</html> iframe в виде строки.

document.getElementById('iframeId').contentWindow.document.documentElement.outerHTML

Ответ 7

Похоже, что jQuery не предоставляет метод для извлечения всего HTML-кода iFrame, однако, поскольку он обеспечивает доступ к собственному элементу DOM, возможен гибридный подход:

$("iframe")[0].contentWindow.document.documentElement.outerHTML;

Это вернет HTML-код iFrame, включая <THTML>, <HEAD> и <BODY>.