Manipulating an HTML frame to extend larger than the browser window in order to screenshot its full content

I need to take a full-page screenshot from a site which is in a frameset:

  • frame 1 houses some kind of control and is 1 pixel tall
  • frame 2 takes up the rest of the page and holds the content I want to screenshot

The site forces the frameset so it is not possible to use Firefox to do This Frame > Show Only This Frame 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.

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 frame.

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.

Here's the basic essentials of the frame setting code:

<frameset rows="1,*" frameborder="no" border="0" framespacing="0">
    <frame src="/control.php" name="control" id="control" frameborder="0" noresize="noresize" scrolling="no" />
    <frame src="/home/index.php" name="main" id="main" frameborder="0" noresize="noresize" scrolling="auto" />


I also noticed, though probably unrelated to the issue, that a browser-sized canvas element is created inside the frameset after the second frame when loaded:

<canvas width="1920" height="915" style="display: none;"></canvas>

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.

JS/HTML changes I've tried so far (none of which have produced any change in frame height):

  • manually setting rows as a very large pixel value e.g. 1,4000 or as an oversized percentage value e.g. 1,300%
  • Removing the control frame entirely (and setting the rows accordingly)
  • setting HTML-based height values for the frame in question via Firebug
  • setting CSS-based height values for the frame in question via Firebug
  • setting the height value directly through Firebug's Layout tab (just resets itself to original value)

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 <frameset> layouts any more of course!

If you have any ideas, I'd love to hear them.

EDIT: 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...

Frameset Redirect

File: framesetredirect.js
Creation date: 20050513

Insert this script in the <head> 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 = (( != null) && ( > 1))? : "";
var hash = ((location.hash != null) && (location.hash.length > 1))? location.hash : "";

//build the frameset URL with pathname & 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 && != frameName)) location.href = thisPage;




Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.