Javascript Iframe innerHTML

T

10

24

Does anyone know how to get the HTML out of an IFRAME I have tried several different ways:

document.getElementById('iframe01').contentDocument.body.innerHTML
document.frames['iframe01'].document.body.innerHTML
document.getElementById('iframe01').contentWindow.document.body.innerHTML

etc

Tend answered 26/9, 2008 at 12:30 Comment(2)

For anyone else who lands here from a Google search, in Firefox at least perhaps also try theiFrameObject.contentDocument.body.innerHTML. – Comeback 9/7, 2010 at 19:15

@MattBlaine's solution works, but the iframe src needs to be on the same domain as the main window. Otherwise, the iframe will have to pass its window to the parent on load parent.ifw = window and then the parent can use window.ifw.document – Antonetteantoni 31/3, 2012 at 15:59

G

21

I think this is what you want:

window.frames['iframe01'].document.body.innerHTML

EDIT:

I have it on good authority that this won't work in Chrome and Firefox although it works perfectly in IE, which is where I tested it. In retrospect, that was a big mistake

This will work:

window.frames[0].document.body.innerHTML

I understand that this isn't exactly what was asked but don't want to delete the answer because I think it has a place.

I like @ravz's jquery answer below.

Gurley answered 26/9, 2008 at 12:35 Comment(2)

And if you want to be more unambiguous you could say: window.frames['iframe01'].document.body.innerHTML – Herrenvolk 26/9, 2008 at 13:5

this way does not and will not work in Firefox, because firefox does not support window.frames['frameId'] only window.frames[0] window.frames[1] etc – Xerography 13/3, 2012 at 8:18

C

12

Having something like the following would work.

<iframe id = "testframe" onload = populateIframe(this.id);></iframe>

// The following function should be inside a script tag

function populateIframe(id) { 

    var text = "This is a Test"
var iframe = document.getElementById(id); 

var doc; 

if(iframe.contentDocument) { 
    doc = iframe.contentDocument; 
} else {
    doc = iframe.contentWindow.document; 
}

doc.body.innerHTML = text; 

  }

Conker answered 18/8, 2010 at 8:32 Comment(0)

G

8

If you take a look at JQuery, you can do something like:

<iframe id="my_iframe" ...></iframe>

$('#my_iframe').contents().find('html').html();

This is assuming that your iframe parent and child reside on the same server, due to the Same Origin Policy in Javascript.

Guaranty answered 26/9, 2008 at 12:32 Comment(4)

You are grabbing the innerHTML of the html element and not the body, and this is a pretty backwards method to do it. When there are native DOM properties for retrieving what you want (e.g. .body) you should avoid the overhead of a find call. – Herrenvolk 26/9, 2008 at 13:13

Stop using a jQuery as an answer please! – Rowell 13/5, 2013 at 12:44

Agreed using JQuery as an answer is really annoying! Did the person who ask for that request for JQuery? – Pontias 9/12, 2013 at 9:23

@Herrenvolk there are people who try to think performance-wise, challenge-wise, program-wise. The others think jQuery is the solution to all problems... – Scoot 14/12, 2014 at 15:44

O

4

Conroy's answer was right. In the case you need only stuff from body tag, just use:

$('#my_iframe').contents().find('body').html();

Omalley answered 12/12, 2012 at 15:58 Comment(1)

Best Answer! Thanks! Don't forget: <head> <script src="ajax.googleapis.com/ajax/libs/jquery/3.1.1/…> </head> – Obliging 22/11, 2016 at 8:35

B

2

You can use the contentDocument or contentWindow property for that purpose. Here is the sample code.

function gethtml() {
  const x = document.getElementById("myframe")
  const y = x.contentWindow || x.contentDocument
  const z = y.document ? y.document : y
  alert(z.body.innerHTML)
}

here, myframe is the id of your iframe. Note: You can't extract the content out of an iframe from a src outside you domain.

Byrom answered 2/9, 2011 at 21:11 Comment(0)

C

1

Don't forget that you can not cross domains because of security.

So if this is the case, you should use JSON.

Crutcher answered 26/9, 2008 at 12:38 Comment(0)

W

1

This solution works same as iFrame. I have created a PHP script that can get all the contents from the other website, and most important part is you can easily apply your custom jQuery to that external content. Please refer to the following script that can get all the contents from the other website and then you can apply your cusom jQuery/JS as well. This content can be used anywhere, inside any element or any page.

<div id='myframe'>

  <?php 
   /* 
    Use below function to display final HTML inside this div
   */

   //Display Frame
   echo displayFrame(); 
  ?>

</div>

<?php

/* 
  Function to display frame from another domain 
*/

function displayFrame()
{
  $webUrl = 'http://[external-web-domain.com]/';

  //Get HTML from the URL
  $content = file_get_contents($webUrl);

  //Add custom JS to returned HTML content
  $customJS = "
  <script>

      /* Here I am writing a sample jQuery to hide the navigation menu
         You can write your own jQuery for this content
      */
    //Hide Navigation bar
    jQuery(\".navbar\").hide();

  </script>";

  //Append Custom JS with HTML
  $html = $content . $customJS;

  //Return customized HTML
  return $html;
}

Wollis answered 15/1, 2019 at 10:59 Comment(0)

G

0

document.getElementById('iframe01').outerHTML

Giulietta answered 19/6, 2014 at 11:30 Comment(0)

H

0

You can get the source from another domain if you install the ForceCORS filter on Firefox. When you turn on this filter, it will bypass the security feature in the browser and your script will work even if you try to read another webpage. For example, you could open FoxNews.com in an iframe and then read its source. The reason modern web brwosers deny this ability by default is because if the other domain includes a piece of JavaScript and you're reading that and displaying it on your page, it could contain malicious code and pose a security threat. So, whenever you're displaying data from another domain on your page, you must beware of this real threat and implement a way to filter out all JavaScript code from your text before you're going to display it. Remember, when a supposed piece of raw text contains some code enclosed within script tags, they won't show up when you display it on your page, nevertheless they will run! So, realize this is a threat.

http://www-jo.se/f.pfleger/forcecors

Hummel answered 16/2, 2015 at 2:32 Comment(0)

P

-1

You can get html out of an iframe using this code iframe = document.getElementById('frame'); innerHtml = iframe.contentDocument.documentElement.innerHTML

Pantile answered 29/5, 2018 at 4:50 Comment(0)

Recommended topics

Hot tags