CODEWITHSUNDEEP
javascripthtmliframe
omg
omg

Reputation: 140112

How to get the body's content of an iframe in 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>

What I want to get is:

test<br/>

Upvotes: 195

Views: 621263

Answers (14)

Hakan
Hakan

Reputation: 613

var ifr = document.getElementById('main');
ifr.onload=function(){
    var cont = ifr.contentWindow.document.body.innerHTML;
    alert(cont);
}

Upvotes: 0

user21098855
user21098855

Reputation: 11

Most of the answers given are correct, but you should not forget that an iframe is rendered separately from the main document, and that takes some time: do not expect a script in your main document to be able to immediately access a document in an iframe: it will only return an empty document.

Make sure you put code which is going to deal with an iframe in a document.body.onload function in your main document.

Upvotes: 1

Aman Jain
Aman Jain

Reputation: 11

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

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

document.body.appendChild(iframeContentDiv);

Upvotes: 0

Dennis Kozevnikoff
Dennis Kozevnikoff

Reputation: 2277

If you want to not just select the body of your iframe, but also insert some content to it, and do that with pure JS, and with no JQuery, and without document.write(), I have a solution that no other answer provides.

You can use the following steps

1.Select your iframe:

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

2.Create an element that you want to insert into the frame, let's say an image:

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.Insert the image element into the iframe:

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

Upvotes: 2

Timothy Ayodele
Timothy Ayodele

Reputation: 305

You can get the contents of the iframe body in one line of code:

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

Upvotes: 2

sunakshi
sunakshi

Reputation: 31

To get body content from javascript ,i have tried the following code:

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

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

where "id_description_iframe" is your iframe's id. This code is working fine for me.

Upvotes: 2

algorhythm
algorhythm

Reputation: 8728

The exact question is how to do it with pure JavaScript not with jQuery.

But I always use the solution that can be found in jQuery's source code. It's just one line of native JavaScript.

For me it's the best, easy readable and even afaik the shortest way to get the iframes content.

First get your iframe

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

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

And then use jQuery's solution

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

It works even in the Internet Explorer which does this trick during the contentWindow property of the iframe object. Most other browsers uses the contentDocument property and that is the reason why we proof this property first in this OR condition. If it is not set try contentWindow.document.

Select elements in iframe

Then you can usually use getElementById() or even querySelectorAll() to select the DOM-Element from the iframeDocument:

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

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

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

Call functions in the iframe

Get just the window element from iframe to call some global functions, variables or whole libraries (e.g. 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 /*, ... */);

Note

All this is possible if you observe the same-origin policy.

Upvotes: 196

CoursesWeb
CoursesWeb

Reputation: 4237

use content in iframe with JS:

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

Upvotes: 10

bizzr3
bizzr3

Reputation: 1955

it works perfectly for me : 

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

Upvotes: 62

Michael Adedayo
Michael Adedayo

Reputation: 815

Using JQuery, try this:

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

Upvotes: 75

nekno
nekno

Reputation: 19267

The following code is cross-browser compliant. It works in IE7, IE8, Fx 3, Safari, and Chrome, so no need to handle cross-browser issues. Did not test in 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>

Upvotes: 2

Jose Basilio
Jose Basilio

Reputation: 51548

AFAIK, an Iframe cannot be used that way. You need to point its src attribute to another page.

Here's how to get its body content using plane old javascript. This works with both IE 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);
 }

Upvotes: 26

Graham Clark
Graham Clark

Reputation: 12956

Chalkey is correct, you need to use the src attribute to specify the page to be contained in the iframe. Providing you do this, and the document in the iframe is in the same domain as the parent document, you can use this:

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

Obviously you can then do something useful with the contents instead of just putting them in an alert.

Upvotes: 4

user110714
user110714

Reputation:

I think placing text inbetween the tags is reserved for browsers that cant handle iframes i.e...

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

You use the 'src' attribute to set the source of the iframes html...

Hope that helps :)

Upvotes: 4

Related Questions