Obtaining HTML from the page in an iframe

Question

I have created a screen which has two controls on it. The first one is an iframe which shows a web-page within the main web page. That works fine. Underneath that is a textarea in which I would like to display the HTML that created the iframe page. Here is an abstract of my HTML: How do I make this work?

<iframe id='myiframe'></iframe>
<textarea id='mybuffer'></textarea>

and

var cow = document.getElementById('myiframe');
var pig = document.getElementById('mybuffer');
cow.src='http:google.com'; //this works
pig.value=cow.innerHTML;   //this does not

If the page is in a different domain, you are not going to do it with JavaScript alone. — epascarello, Sep 25 '17 at 14:54
please refer to [this question](https://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript) — Kevin Kloet, Sep 25 '17 at 14:55
It is not in a different domain. This is a web page I have created. — LittleNorm, Sep 25 '17 at 15:44
@LittleNorm — So why are you using a real domain that you obviously have no control over in your example? — Quentin, Sep 25 '17 at 16:57

score 0 · Answer 1 · answered Sep 25 '17 at 16:56

The child would need to send the parent its html using the postMessage api. The parent would have an event listener where it waits for the child to send its html to it. The child can get its own html using

document.documentElement.outerHTML

once window.ondomready has fired.

Alberto Martinez · Answer 2 · 2017-09-25T18:28:38.447

The second part doesn't work because the document is not loaded yet, and because you are not getting the contents of the document but of the iframe itself (you say that both pages are in your server, if they were in different domains it won't work because you'll get a cross-origin error).

You have to wait until the main page is loaded, then load the frame, wait until the frame is loaded and then get the contents of the frame:

<head>
  <script type="text/javascript">
    function getFrameHTML() {
      var pig = document.getElementById('mybuffer');
      var cow = document.getElementById('myiframe');
      pig.value = cow.contentDocument.documentElement.outerHTML; //documentElement is <html>
    }

    function loadFrame() {
      var cow = document.getElementById('myiframe');
      cow.addEventListener("load",getFrameHTML);
      cow.src = 'http://YouHost/YourPage.html';
    }
  </script>
</head>

<body onload="loadFrame()">
  <iframe id="myiframe"></iframe>
  <textarea id="mybuffer"></textarea>
</body>

Obtaining HTML from the page in an iframe

2 Answers2