AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Make iframe responsive1/8/2023 ![]() parent.js - the script associated with the document loading the iframe.iframe.js - the script associated with the iframe document.Determine the height of the iframe content on page loadįirstly, there are two scripts involved here. The solution I eventually came up with was to use the postMessage API to communicate between a script in the embedded document, and a script in the hosting document.Īlthough this method is limited in that requires that we have access to both documents, I thought it would still be useful to share just in case someone else is in the same situation. I spent ages looking around for how I could do this and came up short. With this caniuse embed, however, there is no standard size so I needed to have access to the actual height of the content within the iframe to determine what the height of the element should be. So, we can use CSS to determine what the height of the iframe should be at any given width. With most embedded content, for example a Youtube Video, we can workaround this because, even though the height does change, the aspect ratio stays the same. However, because of the Content Security Same-origin Policy, there is no way to access the height of the content within the iframe from the document hosting the iframe. While creating the embed for caniuse, one part I found quite challenging was making the iframe fully responsive. When the iframe is resized, the content within it shifts, and the height that the element itself should be, changes.
0 Comments
Read More
Leave a Reply. |