Communicate between iFrame and parent window

Nowadays, a lot of third-party services, embed codes and other utils using an iFrame window to embed plugins and other layouts into other sites or applications.
If you have ever tried to create a widget or other embed code, the main problem that arises very fast is that you can’t communicate between the iFrame and parent window hosting website. This behavior is designed on purpose to create a “shield” or a “barrier” between one site and another one, to prevent the infamous cross-site scripting attacks.

Usually when you’re trying to get to the parent frame from hosted iFrame you’ll get the following error:
“Unsafe JavaScript attempt to access frame with URL http://WebsiteA.com/ from frame with URL http://WebsiteB.com/child.html. Domains, protocols and ports must match.”
In order to bypass the Cross-site scripting error, and to be able to communicate between the iFrame and the hosted site, newer browsers have the postMessage function which can be used to communicate between the iFrame and the hosted website.
This function is supported in IE8 and above.
For IE7 there are many third-party libraries which implement this feature.
Click here for example.

Before we can start the communication, we need to set up basic javascript code to handle sending and receiving messages(data) both in the iFrame and parent window.
In the hosted website(parent window of the iFrame):

<script>
// commnicator class which will receive messages from the iframe.
function communicator() {
    this.receiveMessage = function(event) {
        var eventData = event.data;
        switch(eventData.name) {
            case 'scrollToTop':
                this.scrollToPageTop();
                break;
            case 'resizeIframe':
                var height = eventData.params.height;
                this.resizeIframe(height);
                break;
            default:
                break;
        }
    };
    this.sendMessage = function(iFrameElem, message) {
        iFrameElem.contentWindow.postMessage(message, '*');
    };
    this.addListeners = function() {
        window.addEventListener("message", jQuery.proxy(this.receiveMessage, this), false);
    };

};
// Initializing the communicator
var c = new communicator();
</script>

In the iFrame, you need to apply the same javascript which will wait for messages from the parent window.

Example of sending data to the parent window:

window.parent.postMessage({name: 'scrollToTop'}, '*');
var message = {name: "resizeIframe", params: {height: 500}};
window.parent.postMessage(message, '*');

If you have any questions on other implementations, please don’t hesitate to ask.
using this idea, you can communicate and create magic between your iFrame and the “outside world”.

One thought on “Communicate between iFrame and parent window

  1. This is really attentiongrabbing, You’re a very professional blogger. I have joined your rss feed and sit up for in search of extra of your fantastic post. Also, I have shared your site in my social networks! gcdedeefekbbcgff

Leave a Reply

Your email address will not be published. Required fields are marked *