Coder Perfect

In Javascript, how can I access the content of an iframe’s body?

Category: html

Tag: , ,

Problem

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

What I’m looking for is:

test<br/>

Asked by omg

Solution #1

The real question is how to do it without jQuery and with pure JavaScript.

However, I always utilize the solution found in the jQuery source code. It’s only one line of JavaScript native code.

It’s the best, most readable, and, afaik, quickest way to retrieve the iframes content for me.

Get your iframe first.

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

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

Then you can utilize jQuery’s solution.

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

In the iframe, select the elements you want to use.

Then you can generally choose the DOM-Element from the iframeDocument using getElementById() or even querySelectorAll():

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

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

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

In the iframe, call functions

To call some global functions, variables, or entire libraries (e.g. jQuery), get simply the window element from the iframe:

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

Note

All of this is achievable if the same-origin policy is followed.

Answered by algorhythm

Solution #2

Try this with JQuery:

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

Answered by Michael Adedayo

Solution #3

For me, it works perfectly:

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

Answered by bizzr3

Solution #4

An Iframe, AFAIK, cannot be utilized in this manner. You’ll need to change the source attribute to point to another page.

Here’s how to extract the content of its body using plain old javascript. This works in both Internet Explorer and 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);
 }

Answered by Jose Basilio

Solution #5

use JS to render content in an iframe:

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

Answered by CoursesWeb

Post is based on https://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript