Как получить содержание тела 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/>

javascript html iframe

— О, мой бог
источник

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 /*, ... */);

Заметка

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

— Algorhythm
источник

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;

— bizzr3
источник

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');

— CoursesWeb
источник

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>

— nekno
источник

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. Этот код работает нормально для меня.

— sunakshi
источник

2

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

— gehbiszumeis

1

Ответы только на код считаются некачественными: обязательно предоставьте объяснение, что делает ваш код и как он решает проблему. Это поможет вам и будущим читателям, если вы сможете добавить больше информации в свой пост. См. Также Объяснение полностью основанных на коде ответов: meta.stackexchange.com/questions/114762/…

— borchvm