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

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

138 голосов
/ 29 мая 2009 
<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/>

Ответы [ 8 ]

141 голосов
/ 19 июня 2012

Точный вопрос в том, как сделать это с чистым 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 /*, ... */);

Примечание

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

67 голосов
/ 26 января 2010

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

$("#id_description_iframe").contents().find("body").html()
34 голосов
/ 27 мая 2012

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

document.getElementById('iframe_id').contentWindow.document.body.innerHTML;
23 голосов
/ 29 мая 2009

AFAIK, Iframe не может быть использован таким образом. Вам нужно указать его атрибут 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);
 }
10 голосов
/ 19 ноября 2011

используйте content в iframe с JS: 

document.getElementById('id_iframe').contentWindow.document.write('content');
4 голосов
/ 02 марта 2010

Следующий код является кросс-браузерным. Он работает в 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>
4 голосов
/ 29 мая 2009

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

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

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

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

2 голосов
/ 29 мая 2009

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...