Как получить содержание тела iframe в Javascript?


154
<iframe id="id_description_iframe" class="rte-zone" height="200" frameborder="0" title="description">
  <html>
    <head></head>
    <body class="frameBody">
      test<br/>
    </body>
  </html>
</iframe>

Что я хочу получить:

test<br/>

52
Важное примечание: вы не можете получить доступ к содержимому iFrame, если оно междоменное. См. Политика того же происхождения .
HellaMad

Ответы:


154

Точный вопрос в том, как сделать это с чистым JavaScript, а не с jQuery.

Но я всегда использую решение, которое можно найти в исходном коде jQuery. Это всего лишь одна строка нативного JavaScript.

Для меня это самое лучшее, легко читаемым и даже AFAIK самый короткий путь , чтобы получить содержание IFrames.

Сначала получите свой iframe

var iframe = document.getElementById('id_description_iframe');

// or
var iframe = document.querySelector('#id_description_iframe');

А затем использовать решение JQuery

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

Это работает даже в Internet Explorer, который делает этот трюк во время contentWindowсвойства iframeобъекта. В большинстве других браузеров это contentDocumentсвойство используется, и именно поэтому мы сначала проверяем это свойство в этом условии ИЛИ. Если не установлено, попробуйте contentWindow.document.

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

Тогда вы обычно можете использовать getElementById()или даже querySelectorAll()выбрать DOM-элемент из iframeDocument:

if (!iframeDocument) {
    throw "iframe couldn't be found in DOM.";
}

var iframeContent = iframeDocument.getElementById('frameBody');

// or
var iframeContent = iframeDocument.querySelectorAll('#frameBody');

Вызов функций в iframe

Получить только windowэлемент iframeдля вызова некоторых глобальных функций, переменных или целых библиотек (например jQuery):

var iframeWindow = iframe.contentWindow;

// you can even call jQuery or other frameworks
// if it is loaded inside the iframe
iframeContent = iframeWindow.jQuery('#frameBody');

// or
iframeContent = iframeWindow.$('#frameBody');

// or even use any other global variable
iframeWindow.myVar = window.myVar;

// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);

Заметка

Все это возможно, если вы соблюдаете политику одного происхождения .


2
iframe здесь не определено, либо вы должны написать полный код, либо не должны писать с ним jQuery
Тарун Гупта

13
пожалуйста, извините, но строка кода - это фрагмент кода jquery, а блок кода - мой собственный пример кода. Остальное должно кто-нибудь вытащить. единственное, чего вам не хватает - это переменной iframe. И я не могу знать, где находится ваш iframe или его идентификатор.
алгоритм

5
Не могли бы вы добавить предупреждение в начало ответа, что это не работает, если у iframe есть удаленный src? Если я не прав, я был бы признателен, если бы вы указали мне, как я все еще могу получать содержимое iframe, не отправляя другой HTTP-запрос (это невозможно, потому что мне нужен исполняемый javascript для создания содержимого iframe, и я не хочу развертывать вторая среда javascript, если этого можно избежать).
Заклайн

1
У меня есть такое предупреждение. Но в конце моего объяснения. Вы должны соблюдать ту же политику происхождения. Вот и все.
Алгоритм

2
Чтобы заставить вышеупомянутое работать, я должен был заключить это в document.querySelector('#id_description_iframe').onload = function() {... Надеюсь, что это помогает кому-то.
user3442612

71

Используя JQuery, попробуйте это:

$("#id_description_iframe").contents().find("body").html()

27
Это не работает, потому что «Домены, протоколы и порты должны совпадать». : Небезопасная попытка JavaScript получить доступ к фрейму с URL
Ionică Bizau,

2
Как уже упоминалось, это будет работать, если домены совпадают. К вашему сведению, я только что обнаружил, что $ ("# id_description_iframe #id_of_iframe_body"). Html () работает в Chrome, но не во всех версиях Firefox, и, следовательно, использование вышеупомянутого хорошо. Т.е. $ ("# id_description_iframe #id_of_iframe_body"). Contents (). Find ("body"). Html () сработал в обоих случаях
hobailey

41

у меня отлично работает

document.getElementById('iframe_id').contentWindow.document.body.innerHTML;

3
Странно, но у меня .bodyне работает. Однако .getElementsByTagName('body')[0]делает.
Дженни О'Рейли

это не ".body", просто "тело". убрать точку
Арджун

1
это должно быть ответом, если вы в ванильном JavaScript.
Йованни Г

23

AFAIK, Ифраме не может быть использован таким образом. Вам нужно указать его атрибут src на другую страницу.

Вот как можно получить содержимое тела, используя старый старый javascript. Это работает как с IE, так и с Firefox.

function getFrameContents(){
   var iFrame =  document.getElementById('id_description_iframe');
   var iFrameBody;
   if ( iFrame.contentDocument ) 
   { // FF
     iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
   }
   else if ( iFrame.contentWindow ) 
   { // IE
     iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
   }
    alert(iFrameBody.innerHTML);
 }

1
это делает на сафари (то есть филиал)
Андрей Кристиан Продан

Имея проблему с несколькими доменами, заблокировал фрейм с источником « someOther.com » от доступа к кадру с несколькими источниками.
lannyf

10

использовать contentв iframe с JS:

document.getElementById('id_iframe').contentWindow.document.write('content');

5

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

<iframe src ="html_intro.asp" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

Вы используете атрибут 'src', чтобы установить источник HTML-кода iframes ...

Надеюсь, это поможет :)


3

Следующий код является кросс-браузерным. Он работает в IE7, IE8, Fx 3, Safari и Chrome, поэтому нет необходимости решать проблемы между браузерами. Не тестировал в IE6.

<iframe id="iframeId" name="iframeId">...</iframe>

<script type="text/javascript">
    var iframeDoc;
    if (window.frames && window.frames.iframeId &&
        (iframeDoc = window.frames.iframeId.document)) {
        var iframeBody = iframeDoc.body;
        var ifromContent = iframeBody.innerHTML;
    }
</script>

HTML ниже работал для меня в Chrome 7 на Mac. Я протестировал этот оригинальный пост в Chrome 6 на Windows, и он работал нормально. <html> <head> </ head> <body> <iframe id = "iframeId" name = "iframeId"> ... </ iframe> <script type = "text / javascript"> var iframeDoc; if (window.frames && window.frames.iframeId && window.frames.iframeId.document) {window.frames.iframeId.document.body.innerHTML = "<h1> testing </ h1>"; } </ script> </ body> </ html>
nekno

1
window.frames.iframeId.documentне определено для меня. (Ubuntu 13.04, Chrome)
Ионик Бизэу

2

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

var e = document.getElementById("id_description_iframe");
if(e != null) {
   alert(e.contentWindow.document.body.innerHTML);
}

Очевидно, что вы можете сделать что-то полезное с содержимым, а не просто поставить их в оповещение.


1

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

var frameObj = document.getElementById('id_description_iframe');

var frameContent = frameObj.contentWindow.document.body.innerHTML;

где "id_description_iframe" - это идентификатор вашего iframe. Этот код работает нормально для меня.


2
Пожалуйста, ставьте свой ответ всегда в контексте, а не просто вставляйте код. Смотрите здесь для более подробной информации.
gehbiszumeis

1
Ответы только на код считаются некачественными: обязательно предоставьте объяснение, что делает ваш код и как он решает проблему. Это поможет вам и будущим читателям, если вы сможете добавить больше информации в свой пост. См. Также Объяснение полностью основанных на коде ответов: meta.stackexchange.com/questions/114762/…
borchvm
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.