Allow embedded tweets to report the height required for display

[FreeTrade]

I've recently switched from twitframe to nitter for embedding tweets in iframes - nitter is much faster, thank you!

One disadvantage is that nitter doesn't appear to have a way to report the height that the tweet requires for display. So I use say 500px for height - sometimes this is too much, and there is whitespace above and below. Sometimes it is not enough and has scrollbars in each iframe to accomodate the content.

Example - https://member.cash/#show?start=0&limit=25&order=new&content=posts&filter=everyone&qaddress=-5396545772202406684

The main document can't ask the iframe what size it requires because of cross site scripting security.

Twitframe's solution to this is to use postMessage - the main doc sends a message to the iframe requesting the height, the iframe sends back a message with the required height. (more details at https://twitframe.com/) I wonder if nitter could do this or has another solution for this problem.

[LainLayer]

We are aware of this, embeds aren't complete yet. Sadly this is a tricky problem to fix cleanly and hopefully without JavaScript. We will have an embed button on tweets at some point that calculates the height in advance. Currently, i recommend going a bit over the tweet height, the content should center itself at least.

[FreeTrade]

Thanks for the suggestion - however not possible to know what the height of a tweet will be in advance, and height can vary widely depending on content. Agreed - not easy to solve without JavaScript, is that a deal breaker?

[JoshyPHP]

It's virtually impossible to precompute the layout of a tweet because there's a pretty wide range of devices that display tweets, with all sizes of viewports, and on top of that some users may have special settings to accommodate their needs such as a much bigger minimum font size than default.

Realistically, the only way to properly size embedded tweets without JavaScript would be to have browser support for auto-resizing iframes. That would solve that issue for many different dynamically-sized embeds such as Facebook posts and such. However, it would take a multi-year process to get it accepted as a standard, then have it implemented in major browsers.

The simplest, smallest, and most efficient way to do it with JavaScript would be to have a MessageEvent listener in the embedded tweet's view, and whenever it receives any message from its parent, it uses the provided messaging port to reply with the tweet's height. The message channels ensure that the communication doesn't leak outside of the parent/child context. Something like this:

Parent:

<iframe scrolling=no style="border:0;height:350px;width:550px" src="https://nitter.net/joinpeertube/status/1735201319344812394/embed"
onload="let c=new MessageChannel;c.port1.onmessage=e=>this.style.height=e.data+'px';this.contentWindow.postMessage('','*',[c.port2])"></iframe>

Iframe:

<script>
window.addEventListener(
	'message',
	e => (e.source === window.parent) && e.ports[0]?.postMessage(document.documentElement.scrollHeight)
);
</script>