Create Screenshot of an scrollable iframe

Recently I had the challenge to create a screenshot of an iframe that was embedded into a html page. After a while I got the idea to try it with plain vanilla javascript. Hence nearly all modern browsers support the contentWindow property of iframes (see this article from w3cSchool.com) And what should I say? The following snippet brought me the solution:

To execute this script, I just used the javascript console (F12 in most browsers).

As you might have recognized, you could use document.getElementById(‘NiceElementID’) for ifr​ame selection as well. 
A more complex example is the following one, which selects the iframe inside the right preview pane of this page:

scrollable iframe screenshot

Code:

As you can see, this technique also works within cascaded iframes.

Leave a Reply

Your e-mail address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.