![iframe responsive iframe responsive](https://www.wpexplorer.com/wp-content/uploads/foobox-iframe-example.png)
![iframe responsive iframe responsive](https://www.tinywebgallery.com/blog/wp-content/uploads/2020/05/show_only_part_of-the_iframe_image.png)
![iframe responsive iframe responsive](https://rogerruckstuhl.ch/wp-content/uploads/2021/02/youtube-responsive-in-webseite-einbinden.jpg)
* Send a message to the parent frame to resize this iframe. To resize the iframe we need to communicate in the other direction - the iframe needs to tell the parent how big it is. The sender ensures that the data is only sent to trusted domains and the receiver checks that the message came from trusted domains. The cross-window messaging security model can be two-sided. We attach this differently for older versions of IE.ĪddEventListener("message", listener, false) Only listen to events from the top-level page. Other JavaScript we can send over to the iframe via postMessage(), but we need to start with something. Unfortunately many 3rd-party tools don’t allow this. If your donation form’s configuration tool allows you to insert JavaScript). (tags, '') īefore we get too far there is one caveat: You must be able to have a small snippet of JavaScript in the iframe (e.g. Send a message to the iframe only if it contains content from Var iframe = document.getElementById('the-iframe') We'll set up a line of communication from the parent to the iframe and then send CSS and JavaScript links that can be used to style and otherwise manipulate the content. Let's start with a quick tutorial on how postMessage() works. This is a bit awkward, but there's good news at the end of this blog post. Instead we have to use the postMessage() method to do cross-window messaging. With one slight problem - due to the same-origin policy an iframe at a different domain can't use JavaScript to directly communicate with the parent page. We can use JavaScript to communicate between the iframe and the top-level page. But often there is no alternative ( Salsa, Blackbaud NetCommunity, Wufoo and many other CRM/donation/form platforms do not have adequate JavaScript APIs). Iframes quickly become untenable in a responsive world. submits a form) the content may shrink and grow. And as the user interacts with the iframe (e.g. You might be able to choose reasonable settings for a desktop viewport, but a smaller mobile viewport may require something narrower and longer (or sometimes even wider and shorter). The challenge with responsive design is the hard-coded width and height. two years ago) a common way to insert 3rd-party content was with an iframe. Back in the prehistoric days before responsive web development (a.k.a. Whether that external content is self-contained functionality brought into a website via SaaS, or to add a donation form to your website in a way that reduces your PCI Requirements, or to possibly connect your disparate web properties together. The Web has always had a love-hate relationship with 3rd-party content.