Resize a cross domain iFrame (the hackiest way)

Situation 🤔

Some time ago, I was implementing a cross domain iFrame in Next.js and ran into a slight problem when it came to dynamically setting its height. Due to limitations imposed by the browser, we're prevented from using JS magic to access the page and getting the actual height of the document. A library, iframe-resizer promised to solve the issue however it required a small script to be placed on the page hosting the iFrame. Unfortunately that wasn't an option 🚫

Task 📃

Fortunately, at two redbulls deep, Poros had mercy and an ✨idea✨ came outta no where. What I wanted to accomplish was, on page load, assign a height to the iFrame that will display all it's contents without unneeded whitespace. Why not do it in the most straight forward way possible? Remotely load the URL that will get displayed in the iFrame, get the height of the loaded contents then apply that height to the iFrame.

Lights, Camera... Action! 🎬

One way to do this was through browser automation. There's Selenium but I went with Puppeteer. I made an API endpoint that when hit, uses Puppeteer to load the site then get & return the height using this method I saw on stackoverflow.

Results 💯

The result was a page that takes a little longer to load but has an iFrame that correctly shows all the contents! Check out the code sample below

// npm i puppeteer
const puppeteer = require('puppeteer')

async function getContentHeight({ clientWidth, clientHeight }) {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    await page.setViewport({ width: clientWidth, height: clientHeight })
    await page.goto('my-url-was-here-b4-yours');
    const contentHeight = await page.evaluate(() => {
        let body = document.body,
            html = document.documentElement;

        let height = Math.max(body.scrollHeight, body.offsetHeight,
            html.clientHeight, html.scrollHeight, html.offsetHeight);
        return height
    });
    console.log(contentHeight);

    await browser.close();
}

getContentHeight({ clientWidth: 1366, clientHeight: 768 })

Disclaimer

Pleaaase don't use this in prod! But, if you do.. let me know how it goes 😂

Attribution

Cover image: Andy Park Art