trying to print iframe content but print the whole page instead

Question

I've iframe that i created dynamically in my html page and print button with event on click to print iframe's content but unfortunately it prints the whole page instead but after long search I've found some solutions like focus on iframe before fire print event but it seems doesn't work on IE and MS Edge it works in Chrome the only solution that works with me is to open new window and copy iframe outerhtml in it and fire print event after the content loaded in new window then close the new window immediately after the user take an action to print or cancel but this solution doesn't look user friendly so does it there any solution to print iframe content in IE and Edge

 <html>
<head>
<title>IFrame Printing Issue</title>

<script type="text/javascript">
  var g_iFrame;

  function onLoad()
  { 
     g_iFrame = document.createElement("iframe");
     g_iFrame.id = "testFrame";
     var style = g_iFrame.style;
     style.border = "1px solid black";
     style.width = "300px";
     style.height = "200px";

     document.body.appendChild(g_iFrame);
  }

  function setIFrameSrc()
  {
     g_iFrame.src = "Test.htm";
  }

  function printIFrameContent()
  {
  window.frames["testFrame"].contentWindow.focus();
  window.frames.testFrame.contentWindow.print();
  }
</script>
</head>

<body onload="onLoad();">
<button type="button" onclick="setIFrameSrc();">Set IFrame Src</button> 
 <br /> 
<button type="button" onclick="printIFrameContent();">Print IFrameContent</button>
<br /> 

 <div style="border: 1px solid black; width: 300px; height: 200px;">
  This is to test printing the content of an IFrame whose src is set dynamically.
</div> 
</body>
</html>

score 3 · Accepted Answer · edited May 23 '17 at 10:33

3

You may first check if the user agent is IE:

function printIFrameContent()
{      
  var ua = window.navigator.userAgent;
  var msie = ua.indexOf ("MSIE ");
  var iframe = document.getElementById("testFrame");

  if (msie > 0) {
      iframe.contentWindow.document.execCommand('print', false, null);
  } else {
      iframe.contentWindow.print();
  }
}

Referred a similar answer on SO: https://stackoverflow.com/a/19639241/1500851

edited May 23 '17 at 10:33

Community

1
1

answered Jun 19 '16 at 10:28

Slartibartfast

1,592
4
22
33

this method doesn't seem capable to identify IE when I opened the test from IE the value of msie stays -1 – Mahmoud Zakal Jun 19 '16 at 10:49
You can use the strings `"Trident"` to check for IE and `"Edge"` for Edge – Slartibartfast Jun 19 '16 at 11:21

trying to print iframe content but print the whole page instead

1 Answers1