title: Manipulating an HTML frame to extend larger than the browser window in order to screenshot its full content
body: <p>I need to take a full-page screenshot from a site which is in a <code>frameset</code>:</p>
  
  <ul>
  <li>frame 1 houses some kind of control and is 1 pixel tall</li>
  <li>frame 2 takes up the rest of the page and holds the content I want to screenshot</li>
  </ul>
  
  <p>The site forces the frameset so it is not possible to use Firefox to do <strong>This Frame > Show Only This Frame</strong> unless you disable JavaScript (e.g. via Web Developer toolbar) beforehand, but sadly the page that loads requires JS to lay out/show certain elements, and I need the page to be rendered properly. Re-enable JavaScript and refresh and the site's frame-forcing code takes over again and we're back to square one.</p>
  
  <p>As far as I know, the most limiting factor, is that whilst there are tons of tools that can capture the entire contents of a browser window, including what is off-screen, there is no screenshot tool available to capture the entire contents of an HTML <code>frame</code>.</p>
  
  <p>Another option is zooming out far enough to fit the whole page/frame on screen, though this again messes with the rendering, and is generally not reliable or desirable for a screenshot.</p>
  
  <p>Here's the basic essentials of the frame setting code:</p>
  
  <pre><code>&lt;frameset rows="1,*" frameborder="no" border="0" framespacing="0"&gt;
      &lt;frame src="/control.php" name="control" id="control" frameborder="0" noresize="noresize" scrolling="no" /&gt;
      &lt;frame src="/home/index.php" name="main" id="main" frameborder="0" noresize="noresize" scrolling="auto" /&gt;
  &lt;/frameset&gt;
  
  &lt;noframes&gt;&lt;body&gt;&lt;/body&gt;&lt;/noframes&gt;
  </code></pre>
  
  <p>I also noticed, though probably unrelated to the issue, that a browser-sized <code>canvas</code> element is created inside the <code>frameset</code> after the second frame when loaded:</p>
  
  <pre><code>&lt;canvas width="1920" height="915" style="display: none;"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>I feel like my best opportunity is to use JavaScript/jQuery to force the frame to be tall enough to house its whole content, at which point I'm hoping that any of the usual screenshot tools would be able to capture the whole thing.</p>
  
  <p>JS/HTML changes I've tried so far (none of which have produced any change in frame height):</p>
  
  <ul>
  <li>manually setting <code>rows</code> as a very large pixel value e.g. <code>1,4000</code> or as an oversized percentage value e.g. <code>1,300%</code></li>
  <li>Removing the control frame entirely (and setting the rows accordingly)</li>
  <li>setting HTML-based height values for the frame in question via Firebug</li>
  <li>setting CSS-based height values for the frame in question via Firebug</li>
  <li>setting the height value directly through Firebug's <em>Layout</em> tab (just resets itself to original value)</li>
  </ul>
  
  <p>I was genuinely quite surprised to not find any content on Stackoverflow or Google for this kind of thing. Admittedly not many sites are still using <code>&lt;frameset&gt;</code> layouts any more of course!</p>
  
  <p>If you have any ideas, I'd love to hear them.</p>
  
  <hr>
  
  <p><strong><em>EDIT:</em></strong> I found the JS for the frameset-forcing code which is called at the top of each page that can appear in the main frame. Perhaps it's possible to counteract this somehow...</p>
  
  <pre><code>/***********************************************
  Frameset Redirect
  
  File: framesetredirect.js
  Version: 0.1.0.0
  Creation date: 20050513
  
  Comment:
  Insert this script in the &lt;head&gt; tag
  of each htm file of the website
  before others scripts.
  
   */
  
  (function() {
  
  var frameControl = "control";
  var frameName = "main"; //main frame name
  var framesetPage = "/scheduler.php"; //frameset file
  
  /* WARNING: do not modify below this line */
  /*****************/
  //if search in the document.location
  var search = ((location.search != null) &amp;&amp; (location.search.length &gt; 1))? location.search : "";
  var hash = ((location.hash != null) &amp;&amp; (location.hash.length &gt; 1))? location.hash : "";
  
  //build the frameset URL with pathname &amp; search
  var thisPage = framesetPage + "?url=" + escape(location.pathname + search + hash);
  
  //if not in the frameset, redirect to the frameset
  if(!parent.frames[frameControl] || (parent.frames.length == 0 &amp;&amp; self.name != frameName)) location.href = thisPage;
  
  })();
  </code></pre>