Get full content of iframe

Question

How can I get the full content of an iframe ? The iframe content is on the same domain. I need to have content with original formatting. I tried something like this:

var iframe_content = document.getElementById("wwwScreen").contentWindow.document.documentElement.outerHTML

This returns content in the wrong format eg

<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

I need content with proper formatting eg

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

I also tried XMLSerializer but I had the same situation. The returned content should be a string

Answer 1

Formating will depend on the size of the screen or in your case on the size of the iframe, so just set the iframe's height and width to 100% to have it fit your screen except % instead of px won't work for height of the screen unless you use this function to calculate get the height of your screen:

function takeHeight(){
  var myHeight = 0;
  if( typeof( window.innerHeight ) == 'number' ) {
    //Non-IE
    myHeight = window.innerHeight;
  } else if( document.documentElement && (document.documentElement.clientHeight) ) {
    //IE 6+ in 'standards compliant mode'
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && (document.body.clientHeight ) ) {
    //IE 4 compatible
    myHeight = document.body.clientHeight;
  }
  return myHeight;
}

That function with return the height of your screen to just set the height and width of your iframe to something like this:

MyIframe.style.height = takeHeight() + 'px';
MyIframe.style.width = '100%';

And that should do it.