search

developit / simple-element-resize-detector

Observes element size changes using a hidden iframe
189 stars 7 forks source link

TypeError frame.contentWindow == null in some browsers #9

Closed luwes closed 6 years ago

luwes commented 6 years ago

Thanks for this wonderful technique! So glad I came by this.

We're using it in the Vimeo player to help with "element queries" however Sentry is reporting this error quite often. Still looking for a fix.

screen shot 2017-10-29 at 17 23 29
luwes commented 6 years ago

frame.contentWindow is not created instantly it seems. something like this fixes it,

frame.onload = () => (frame.contentWindow.onresize = () => handler(element));
developit commented 6 years ago

Hi @luwes! Sorry for the slow reply, just came across this issue today. If you're still using this library, I'd be happy to merge a PR that adds the onload hook.

luwes commented 6 years ago

An additional issue we experienced is that iframe.onload can actually take a long time on a heavy webpage, even when the iframe is empty (src not set).

So there is an elapsed time there in which the iframe could have resized without calling the handler. A solution would be to compare width and height of the element at attaching the onload event and when the onload event fires, and call the handler if either width or height was changed.

A very good alternative is https://github.com/que-etc/resize-observer-polyfill if you don't mind a few extra kb's.