What problem are we solving?
There are many use-cases in which you need to get some information from within the <iframe> and pass it back to the parent page.
The most popular info is the total height of the content within the <iframe>.
For that purpose, people built libraries such is…
Problem with this library is that it is bloated with features you might not need. It also covers only one use-case, for passing the height / width related data from the iframe page to the parent page and updating the iframe sizing.
Honest opinion, this lib is really good, it covers many edge cases and is developed for many years now.
If you need this functionality I would say, use it.
Still, this article is not about should you consume the lib or not, it is about how to do this on your own ⭐️ because JavaScript is too awesome to be fully outsourced to the ever limited JS libraries Eco-system!
Before we start, just to emphasize that with this method you can pass on any info from the iframe to the parent. You aren’t limited to height of the page or anything else… like iframe-resizer is.
In order to communicate bidirectionally, you will need to write some JavaScript code on both ends.
Inside of the parent page and the page which is loaded into the iframe.
Parent page (e.g. https://parent.com)
<!-- HTML -->
<iframe name="embedded" src="https://iframe.com/embedded.html"></iframe>// select the iframe element (you can also dynamically create it)
const iframe = window.frames.embedded;// define the method which will update the height of the iframe
const handleSizingResponse = ({ data }) => {
iframe.height = data;
};// add event listener for receiving the data from the iframe
window.addEventListener('message', handleSizingResponse, false);// send a message to the embeded page
// note that first parameter represents the data you want to send
// from parent to the iframe
// second parameter represents the domain host of the iframe page
iframe.contentWindow.postMessage('message', 'https://iframe.com');
Iframe page (e.g. https://iframe.com)
// method which determines and sends the height info to parent
const sendHeight = e => {
// get page height
const documentHeight = document.documentElement.scrollHeight;
// send height to parent
parent.postMessage(documentHeight, 'https://parent.com');
};// listen to 'message' event and react to it by calling 'sendHeight'
window.addEventListener('message', sendHeight, false);
And… that’s it 😎 with this approach you can send any kind of data in any form between the pages.
In the example above we sent height in the form of a number. But you can send an object, or array or… as well.
Ensure that this is cross-domain compatible by specifying the desired hosts on both ends, within the parent and embedded page. postMessage method’s 2nd parameter is responsible for this.
If you need assistance feel free to post a comment or write to me directly via https://twitter.com/develoger
