Javascript Iframe innerHTML

Question

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

For anyone else who lands here from a Google search, in Firefox at least perhaps also try `theiFrameObject.contentDocument.body.innerHTML`. — Matt Blaine, Jul 09 '10 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` — f.ardelian, Mar 31 '12 at 15:59

wcm · Answer 1 · 2013-12-08T22:41:49.443

22

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.

edited Dec 08 '13 at 22:41

answered Sep 26 '08 at 12:35

wcm

9,045
7
39
64

2

And if you want to be more unambiguous you could say: window.frames['iframe01'].document.body.innerHTML – Prestaul Sep 26 '08 at 13:05
2

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 – Olga Mar 13 '12 at 08:18

cypher · Answer 2 · 2014-02-28T05:45:09.077

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; 

  }

score 8 · Answer 3 · answered Sep 26 '08 at 12:32

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.

answered Sep 26 '08 at 12:32

ConroyP

40,958
16
80
86

3

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. – Prestaul Sep 26 '08 at 13:13
19

Stop using a jQuery as an answer please! – Miguel Alejandro Fuentes Lopez May 13 '13 at 12:44
1

Agreed using JQuery as an answer is really annoying! Did the person who ask for that request for JQuery? – leonneo Dec 09 '13 at 09:23
1

@Prestaul there are people who try to think performance-wise, challenge-wise, program-wise. The others think jQuery is the solution to all problems... – Michael Sazonov Dec 14 '14 at 15:44

score 4 · Answer 4 · edited Apr 13 '15 at 22:20

4

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

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

edited Apr 13 '15 at 22:20

Darius Miliauskas

3,391
4
35
53

answered Dec 12 '12 at 15:58

ravi404

7,119
4
31
40

Best Answer! Thanks! Don't forget: – Rusty Nail Nov 22 '16 at 08:35

score 2 · Answer 5 · edited Nov 13 '19 at 20:52

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.

score 1 · Answer 6 · answered Sep 26 '08 at 12:38

1

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

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

answered Sep 26 '08 at 12:38

Biri

7,101
7
38
52

score 1 · Answer 7 · answered Jan 15 '19 at 10:59

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

score 0 · Answer 8 · edited Jun 19 '14 at 12:07

0

document.getElementById('iframe01').outerHTML

edited Jun 19 '14 at 12:07

Nakilon

34,866
14
107
142

answered Jun 19 '14 at 11:30

user1175106

89
2
9

score 0 · Answer 9 · answered Feb 16 '15 at 02:32

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

score -1 · Answer 10 · answered May 29 '18 at 04:50

-1

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

answered May 29 '18 at 04:50

Agha Ali Abbas

195
1
10

Javascript Iframe innerHTML

10 Answers10

Linked

Related