Solved: Dynamically sizing iframe to it's content - Page 2

oliverparaskos · 12-21-2020 04:00 AM

We’re running looker on our own infrastructure, I have an embedded dashboard which talks to the host through the looker embed-sdk.

I want to size the iframe to the size of the dashboard to prevent weird nested scrolling behaviour.

It doesn’t look like the messages from the dashboard via the embed-sdk include the page height.
Because of cross-origin rules I can’t just `iframe.height = iframe.contentWindow.document.body.scrollHeight;`

Is it possible to;

Include / receive the page height from the events already emitted from the frame?
inject some javascript into the embedded dashboard frame so that I can emit my own event?
Determine page height some other way?

nathaniel_t

Hey there!

Nice thinking on making the embed experience cleaner with the dynamic height change. It sounds like the page:properties:changed JS event might be helpful for the use case you’re describing. This event outputs the height of the dashboard, so picking it up from the iframe should allow you to edit the height of the iframe to line up!

There’s some great context on what the exact format looks like in the list here, which covers all the events that are sent out or receivable by the iframe: https://docs.looker.com/reference/embedding/embed-javascript-events#page:properties:changed

View solution in original post