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

Question

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

<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/>

189

javascript html iframe

Источник

user104015 29 май '09 в 16:30

12 ответов

Другие вопросы по тегам javascript html iframe

user655224 19 июн '12 в 19:26 2012-06-19 19:26 · Answer 1 · 2012-06-19 19:26

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

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

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

Сначала получите свой 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 /*, ... */);

Заметка

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

user259406 26 янв '10 в 17:05 2010-01-26 17:05 · Answer 2 · 2010-01-26 17:05

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

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

74

Источник

user259406 26 янв '10 в 17:05

user1020474 27 май '12 в 05:51 2012-05-27 05:51 · Answer 3 · 2012-05-27 05:51

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

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

60

Источник

user1020474 27 май '12 в 05:51

user83667 29 май '09 в 16:52 2009-05-29 16:52 · Answer 4 · 2009-05-29 16:52

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

user679006 19 ноя '11 в 14:07 2011-11-19 14:07 · Answer 5 · 2011-11-19 14:07

Использование content в iframe с JS:

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

10

Источник

user679006 19 ноя '11 в 14:07

29 май '09 в 16:37 2009-05-29 16:37 · Answer 6 · 2009-05-29 16:37

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

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

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

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

5

Источник

29 май '09 в 16:37

user110776 02 мар '10 в 00:00 2010-03-02 00:00 · Answer 7 · 2010-03-02 00:00

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

user77090 29 май '09 в 16:48 2009-05-29 16:48 · Answer 8 · 2009-05-29 16:48

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

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

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

user10531410 30 июл '21 в 18:16 2021-07-30 18:16 · Answer 9 · 2021-07-30 18:16

Если вы хотите не просто выбрать тело своего iframe, но также вставить в него некоторый контент и сделать это с помощью чистого JS, без JQuery и без document.write(), у меня есть решение, которого нет в других ответах. .

Вы можете использовать следующие шаги

1.Выберите свой iframe:

      var iframe = document.getElementById("adblock_iframe");

2. Создайте элемент, который вы хотите вставить в рамку, скажем, изображение:

      var img = document.createElement('img');
img.src = "https://server-name.com/upload/adblock" + id + ".jpg";
img.style.paddingLeft = "450px";
//scale down the image is we have a high resolution screen on the client side
if (retina_test_media == true && high_res_test == true) {
    img.style.width = "200px";
    img.style.height = "50px";
} else {
    img.style.width = "400px";
    img.style.height = "100px";
}
img.id = "image";

3. Вставьте элемент изображения в iframe:

      iframe.contentWindow.document.body.appendChild(img);

user7968365 16 янв '20 в 09:05 2020-01-16 09:05 · Answer 10 · 2020-01-16 09:05

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

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

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

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

2

Источник

user7968365 16 янв '20 в 09:05

user14926004 23 апр '21 в 20:11 2021-04-23 20:11 · Answer 11 · 2021-04-23 20:11

Вы можете получить содержимое тела iframe в одной строке кода:

      document.getElementsByTagName('iframe')[0].contentWindow.document.body.innerText;

1

Источник

user14926004 23 апр '21 в 20:11

Aman Jain 11 окт '23 в 12:44 2023-10-11 12:44 · Answer 12 · 2023-10-11 12:44

      const iframe1 = document.getElementById('iframe1');
const iframeContent = iframe1.contentWindow.document.body.innerHTML;

const iframeContentDiv = document.createElement('div');
iframeContentDiv.innerHTML = iframeContent;

document.body.appendChild(iframeContentDiv);

0

Источник

Aman Jain 11 окт '23 в 12:44