diplodoc-platform / diplodoc-platform/transform

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

Open
#456 0 comments 1 reaction 0 assignees View on GitHub
enhancement good first issue
Dominant language
TypeScript
Stars
69
Forks
59
Avg merge
1d 21h
Merged PRs (30d)
6

Description

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.