Add ability to resize iframe when embedded application posts message about height change
KalachevDev opened this issue · 0 comments
KalachevDev commented
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