how to print all frames inside frameset/nested frameset with javascript

I have a nested frameset and i what to print all frames with one print button, i searched and tried many solutions which mentioned, but still I have problem with the IE 11. any one can help me please. my code is here. ---main page

<html>
<frameset rows="10%,*">
   <frame name="top_frame" src="top-frame.htm" frameborder="1" noresize="0" scrolling="no">
   <frameset cols="20%,*">
      <frame name="left_frame" src="left-frame.htm" frameborder="0" noresize="0" scrolling="no">
      <frame name="right_frame" src="right-frame.htm" frameborder="0" noresize="0" scrolling="auto">
   </frameset>
</frameset>
</html>

---top-frame.htm:

<html>
<body>
   <div id="app_banner" style="width:50%; border:1px solid #000; height:50px; padding:2px 10px;">
     <span id="app_provider">Company Name</span>
     <input style="float:right" type="button" value="Print" onclick="javascript:window.print();">
   </div>
</body>
</html>

---left-frame.htm:

<html>
<head>
</head>
<body>
<table border="1">
  <tr><td>test left</td><td>123</td></tr>
  <tr><td>test left</td><td>352</td></tr>
  <tr><td>test left</td><td>542</td></tr>
  <tr><td>test left</td><td>2345</td></tr>
  <tr><td>test left</td><td>5432</td></tr>
</table>
</body>
</html>

---right-frame.html:

<html>
<head>
</head>
<body>
    <table border="2">
        <tr><td>test right</td><td>1234</tr>
        <tr><td>test right</td><td>4321</td></tr>
        <tr><td>test right</td><td>5678</td></tr>
        <tr><td>test right</td><td>8765</td></tr>
        <tr><td>test right</td><td>345</td></tr>
    </table>
    </body>
</html>

when i click the print button, it just prints the "top-frame.htm" not all frames. I need to print all the frames.

Note: I used the parent.print(), top.window.print(), focus before print and parent['top_frame'] as well, but it works in Chrome but not in IE11, which my clients use IE.

Recommended topics

Hot tags