diff --git a/app/application.ts b/app/application.ts index ba0d8f877..38dc08993 100644 --- a/app/application.ts +++ b/app/application.ts @@ -1,5 +1,8 @@ import loadPolyfills from './soapbox/load_polyfills'; +// Load iframe event listener +require('./soapbox/iframe'); + // @ts-ignore require.context('./images/', true); diff --git a/app/soapbox/features/embedded-status/index.tsx b/app/soapbox/features/embedded-status/index.tsx index 6c0e5fd7f..67e355507 100644 --- a/app/soapbox/features/embedded-status/index.tsx +++ b/app/soapbox/features/embedded-status/index.tsx @@ -6,6 +6,7 @@ import MissingIndicator from 'soapbox/components/missing_indicator'; import Status from 'soapbox/components/status'; import { Spinner } from 'soapbox/components/ui'; import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; +import { iframeId } from 'soapbox/iframe'; import { makeGetStatus } from 'soapbox/selectors'; interface IEmbeddedStatus { @@ -34,6 +35,14 @@ const EmbeddedStatus: React.FC = ({ params }) => { .catch(() => setLoading(false)); }, []); + useEffect(() => { + window.parent.postMessage({ + type: 'setHeight', + id: iframeId, + height: document.getElementsByTagName('html')[0].scrollHeight, + }, '*'); + }, [status, loading]); + const renderInner = () => { if (loading) { return ; diff --git a/app/soapbox/iframe.ts b/app/soapbox/iframe.ts new file mode 100644 index 000000000..7e578aa3f --- /dev/null +++ b/app/soapbox/iframe.ts @@ -0,0 +1,14 @@ +/** ID of this iframe (given by embed.js) when embedded on a page. */ +let iframeId: any; + +/** Receive iframe messages. */ +// https://github.com/mastodon/mastodon/pull/4853 +const handleMessage = (e: MessageEvent) => { + if (e.data?.type === 'setHeight') { + iframeId = e.data?.id; + } +}; + +window.addEventListener('message', handleMessage); + +export { iframeId };