Изменить размер перекрестного домена iframe (самый хакерский путь)

Ситуация 🤔

Некоторое время назад я реализовал перекрестный домен в следующем.js и столкнулся с небольшой проблемой, когда дело дошло до динамического установления его высоты. Из -за ограничений, налагаемых браузером, нам нельзя было использовать магию JS для доступа к странице и получить фактическую высоту документа. Библиотека, Iframe-Resizer Пообещал решить проблему, однако потребовалось небольшой сценарий, который был размещен на странице, размещая iframe. К сожалению, это не был вариант 🚫

Задача 📃

К счастью, на двух красных рубашках глубиной, Poros Милосердие и ✨ Идея ✨ Никуда не вышел. То, что я хотел достичь, было на загрузке страницы, назначьте высоту iframe, которая будет отображать все его содержимое без ненужного пробела. Почему бы не сделать это самым простым способом? Удаленно загрузите URL -адрес, который будет отображаться в iframe, получите высоту загруженного содержимого, затем примените эту высоту к iframe.

Свет, камера … Действие! 🎬

Один из способов сделать это – автоматизация браузера. Есть Селен Но я пошел с Кукольник Анкет Я сделал конечную точку API, которая при попадании использует кукловолок для загрузки сайта, затем получить и вернуть высоту, используя Этот метод, который я видел на Stackoverflow .

Результаты 💯

Результатом стала страница, которая требуется немного больше времени для загрузки, но имеет iframe, которая правильно показывает все содержимое! Проверьте пример кода ниже

// 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 })

Отказ от ответственности

Pleaaase Не используйте это в Prod! Но, если вы это сделаете .. дайте мне знать, как это происходит 😂

Атрибуция

Изображение обложки: Энди Парк искусство

Оригинал: “https://dev.to/perplexedyawdie/resize-a-cross-domain-iframe-the-hackiest-way-1j57”