diplodoc-platform / transform

Simple transformer YFM (Yandex Flavored Markdown) to HTML.
MIT License
50 stars 34 forks source link

Add ability to resize iframe when embedded application posts message about height change #456

Open KalachevDev opened 2 days ago

KalachevDev commented 2 days ago

There is a great feature of embedded iframe within markup. However, it does not support resizing. I think it would be really helpful to have some plugin to listen to embedded iframes and resize them based on message they post.

This could be simple postMessage with specific contract.

function findIframe(frameElement) {
        var iframeList = document.querySelectorAll('iframe');

        for (var i = 0; i < iframeList.length; ++i) {
            if (iframeList[i].contentWindow === frameElement) {
                return iframeList[i];
            }
        }
    }

    function receiveMessage(e) {
        try {
            var data = JSON.parse(e.data);
            var height = data['iframe-height'];
            var iframe;

            if (height && (iframe = findIframe(e.source))) {
                iframe.style.height = height + 'px';
            }
        } catch (err) {
        }
    }

    window.addEventListener('message', receiveMessage, false);

And also html-extension with functionality of resizing iframes based on content height: https://github.com/diplodoc-platform/html-extension/blob/main/src/runtime/HtmlController.ts#L19