Use browser automation to capture the parent page at full length. The screenshot includes the iframe as it appears inside its on-page viewport; it does not automatically expand the iframe to include content that scrolls inside the frame. If you need that hidden content too, capture the iframe separately and combine the images.
First decide which page you need to capture
There are two different targets:
- The outer page: the full scrollable document containing the iframe. A full-page screenshot captures the iframe in its rendered position and size.
- The iframe document: the embedded page’s own content, including portions beyond the iframe’s visible area. Capture the frame or its relevant elements separately; a parent-page full-page screenshot should not be assumed to expand the frame’s internal scroll area.
Playwright’s fullPage screenshot option captures the page’s full scrollable area rather than just the current viewport. See the Playwright screenshot documentation and its frame documentation. Puppeteer also documents full-page screenshots and element screenshots in its screenshot guide.
Capture the entire outer page with Playwright
This Node.js example captures the parent page, including the iframe as rendered. Install Playwright and its browser first with npm install playwright and npx playwright install chromium. Save the script as capture.mjs, replacing the URL with the page you need:
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
try {
await page.goto('https://example.com/page-with-iframe', {
waitUntil: 'networkidle',
timeout: 60000,
});
await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
await browser.close();
}fullPage: true is the key setting. The viewport controls the page’s rendered width and the initial browser size, so choose dimensions that match the layout you want. A page that keeps loading requests may not reach networkidle; in that case, wait for a relevant selector or a deliberate delay instead of treating network idle as a guarantee that every visual element is ready.
Recommended Free Tools
#1 Best Overall
Wait for the iframe or lazy content
If the iframe appears after the parent loads, wait for its element before taking the screenshot. For example, insert this after goto:
await page.locator('iframe').first().waitFor({ state: 'visible', timeout: 30000 });For lazy-loaded content, scroll through the relevant part of the outer page before capturing so it has a chance to render. Then take the full-page screenshot. Inspect the result: a screenshot can still reveal blank areas if the embedded page or its images have not finished loading.
Rank #2
![Free Fling File Transfer Software for Windows [PC Download]](https://m.media-amazon.com/images/I/41Vq6ZqHfjL._SL160_.jpg)
- Intuitive interface of a conventional FTP client
- Easy and Reliable FTP Site Maintenance.
- FTP Automation and Synchronization
Capture content that scrolls inside the iframe
An iframe can have its own scrollbar, independent of the parent page. To capture content below the iframe’s visible viewport, target the frame or an element inside it. With Playwright, locate the frame by URL, name, or another identifying property using its frame APIs, then select the desired element and capture it. The exact selector depends on the embedded page.
const frame = page.frame({ url: /embedded-page/ });
if (!frame) throw new Error('Embedded frame was not found');
const target = frame.locator('body');
await target.screenshot({ path: 'iframe-content.png' });An element screenshot captures the element as rendered; if the iframe document itself has a long scrollable body, do not assume that an element screenshot will automatically expand every nested scrolling region. For a complete long frame, determine its scrollable content and capture it in sections or use a page context that loads the embedded document directly when permitted. Review the output and combine sections if you need a single tall image.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Account for cross-origin restrictions
When the iframe and parent have different origins, the browser’s same-origin policy prevents parent-page JavaScript from freely reading or manipulating the iframe’s document. This does not prevent browser automation from capturing the rendered output. It does mean you should not build a method that depends on accessing a cross-origin frame’s DOM from the parent.
If you control both the parent and embedded page, they can coordinate through postMessage, with origin checks and an agreed message format. That enables cooperative communication; it does not remove the browser’s DOM-access restrictions. See MDN’s documentation on same-origin policy and cross-origin messaging with postMessage.
Check the image and troubleshoot common failures
- The iframe is missing or blank: confirm the frame is visible and loaded before capture; wait for its selector or a suitable delay, then inspect the saved image.
- The image shows only the visible part of the iframe: that is expected for a parent full-page capture. Capture the frame’s content separately if you need its internal scroll area.
- Lower-page images or content are absent: scroll through the relevant parent-page area to trigger lazy loading, wait for content to appear, and capture again.
- Parent JavaScript cannot inspect the frame: check whether the iframe is cross-origin. Use browser automation to capture its rendered output or arrange
postMessagecommunication if you control both pages. - Sticky elements or edges look clipped: inspect the image at full size and adjust the viewport or capture strategy; fixed and sticky layout behavior may differ in a full-page image.
- Results differ between machines: browser and operating-system versions can change visual output. Keep the browser and host environment consistent when reproducibility matters, as noted in Playwright’s screenshot guidance.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. Its one-request capture returns a screenshot of the page as rendered, including an iframe within the parent’s visible layout. It does not change the distinction between the outer page and content that scrolls inside the iframe.
For the outer page, request a full-page capture with the API’s full-page option:
Best Value
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page-with-iframe -d full_page=true -o page.webpSee the ScreenshotNeo API documentation for the available parameter names and options. ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; those steps can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing status. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.
Create a free ScreenshotNeo account to try 1,000 screenshots a month with no card.
Frequently Asked Questions
Will a full-page screenshot include an iframe?
Yes, it includes the iframe as rendered within the parent page’s visible layout.
Can I capture a cross-origin iframe with browser automation?
You can capture its rendered output. The same-origin policy restricts parent JavaScript from accessing the frame’s document.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsQuick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
