MAKING FULLY RESPONSIVE IMAGES

Making use of Corvid's postMessage() to create a fully responsive image container inside an iframe.

 

Making sure the iframe is ready:

The first step we need to take is to create a way for the iframe to tell the page when it is locked and loaded. Otherwise, the page will sometimes send data to the iframe before the iframe is ready to do anything with it, and our responsiveness function will fail. To that end, let's start off by adding this code inside the iframe:

<!DOCTYPE html>

<html>

<body onload="iframeReady()">

<script type="text/javascript">

function iframeReady(){

window.parent.postMessage("iframe_ready", "*");

}

</script>

</body>

</html>

In our body tag, we tell the document to promise the iframeReady function, which in turn posts a message to the parent window at target *. All of this is a little jargony, but also a very important reminder not to request any sensitive data from a Wix iframe, as 1. we can't get the name of a specific target, thus 2. we have to target * instead, which is not secure.

With that warning out of the way, we can get started on the fun stuff. Just put this in your page code where the iframe is so that the ready signal is received:

...
Purchase this tutorial to continue reading.