Як отримати вміст 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 /*, ... */);

Примітка

Все це можливо, якщо ви дотримуєтесь політики одного походження .

— алгоритм
джерело

2

iframe тут не визначений, або слід написати повний код, або не слід писати jQuery з ним

— Tarun Gupta

13

Вибачте, будь ласка, але рядок коду - це уривок з коду jquery, а блок коду - мій власний приклад коду. Решта, якщо хтось сам вийде. єдине, чого вам не вистачає, це змінна рамка iframe. І я не можу знати, де знаходиться ваш iframe або як його ідентифікатор.

— алгоритм

5

Чи можете ви, будь ласка, додати попередження у відповідь, що це не працює, якщо у iframe є віддалений src? Якщо я помиляюся, я буду вдячний, якщо ви можете вказати мені на те, як я все ще можу отримати вміст iframe, не надсилаючи інший HTTP-запит (неможливо, тому що мені потрібен JavaScript, щоб створити контент iframe і не хочу розгортати розгортання друге середовище javascript, якщо можна уникнути).

— Zackline

1

У мене таке попередження. Але наприкінці мого пояснення. Ви повинні дотримуватися політики того самого походження. Це все.

— алгоритм

2

Щоб вищезгадане працювало, мені довелося вкласти його в document.querySelector('#id_description_iframe').onload = function() {... Надію, що це комусь допоможе.

— користувач3442612

71

Спробуйте JQuery:

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

— Майкл Адедайо
джерело

27

Це не працює, оскільки "Домени, протоколи та порти повинні відповідати". : Небезпечна спроба JavaScript отримати доступ до фрейму з URL

— Ionică Bizău

2

Як згадувалося, воно буде працювати, якщо домени збігаються. FYI, я щойно встановив, що $ ("# id_description_iframe #id_of_iframe_body"). Html () працює в Chrome, але не у всіх версіях Firefox, а значить, використання вищевказаного є прекрасним. Тобто $ ("# id_description_iframe #id_of_iframe_body"). Content (). Find ("body"). Html () працював в обох

— hobailey

41

це прекрасно працює для мене:

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

— bizzr3
джерело

3

Дивно, але для мене .bodyце не працює. Однак .getElementsByTagName('body')[0]робить.

— Дженні О'Рейлі

це не ".body", просто "body". видалити крапку

— Арджун

1

це має бути відповіддю, якщо ви користуєтесь ванільним javascript.

— Jovanni G

23

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

— Хосе Басіліо
джерело

1

це робиться на сафарі (тобто відділення)

— Андрій Крістіан Продан

маючи проблему між домену, заблокував кадр з початковим файлом " someOther.com " від доступу до кадру з перехресним джерелом

— lannyf

10

використання contentв iframe з JS:

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

— КурсиВеб
джерело

5

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

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

Ви використовуєте атрибут 'src' для встановлення джерела htram 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> <type type = "text / javascript"> var iframeDoc; якщо (window.frames && window.frames.iframeId && window.frames.iframeId.document) {window.frames.iframeId.document.body.innerHTML = "<h1> тестування </h1>"; } </script> </body> </html>

— nekno

1

window.frames.iframeId.documentдля мене не визначено. (Ubuntu 13.04, Chrome)

— Ionică Bizău

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