Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
KalachevDev opened this issue Jul 4, 2024 · 0 comments
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@KalachevDev
Copy link

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

@KalachevDev KalachevDev changed the title Add ability resize iframe when embedded application posts message about height change Add ability to resize iframe when embedded application posts message about height change Jul 4, 2024
@3y3 3y3 added the enhancement New feature or request label Sep 20, 2024
@3y3 3y3 added good first issue Good for newcomers easy labels Nov 8, 2024
@3y3 3y3 added this to Help wanted Nov 8, 2024
@3y3 3y3 moved this to Todo in Help wanted Nov 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
Status: Todo
Development

No branches or pull requests

3 participants