pbojinov/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Two way iframe communication

The main difference between the two pages is the method of sending messages. Recieving messages is the same in both.
Parent

Send messages to iframe using iframeEl.contentWindow.postMessage
Recieve messages using window.addEventListener('message')
iframe

Send messages to parent window using window.parent.postMessage
Recieve messages using window.addEventListener('message')
Live Example

http://pbojinov.github.io/iframe-communication/

  
## iframe.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>iframe Window</title>
    <style>
        body {
            background-color: #D53C2F;
            color: white;
        }
    </style>
</head>
<body>

    <h1>Hello there, i'm an iframe</h1>
    <p>Send Message: <button id="message_button">Hi parent</button></p>
    <p>Got Message:</p>
    <div id="results"></div>

    <script>
        // addEventListener support for IE8
        function bindEvent(element, eventName, eventHandler) {
            if (element.addEventListener) {
                element.addEventListener(eventName, eventHandler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + eventName, eventHandler);
            }
        }

        // Send a message to the parent
        var sendMessage = function (msg) {
            // Make sure you are sending a string, and to stringify JSON
            window.parent.postMessage(msg, '*');
        };

        var results = document.getElementById('results'),
            messageButton = document.getElementById('message_button');

        // Listen to messages from parent window
        bindEvent(window, 'message', function (e) {
            results.innerHTML = e.data;
        });

        // Send random message data on every button click
        bindEvent(messageButton, 'click', function (e) {
            var random = Math.random();
            sendMessage('' + random);
        });
    </script>
</body>
</html>

## parent.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Parent Window</title>
</head>
<body>

    <h1>Parent Window</h1>
    <p>Send Message: <button id="message_button">Hi there iframe</button></p>
    <p>Got Message:</p>
    <div id="results"></div>
    <br/>

    <script>
        // addEventListener support for IE8
        function bindEvent(element, eventName, eventHandler) {
            if (element.addEventListener){
                element.addEventListener(eventName, eventHandler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + eventName, eventHandler);
            }
        }

        var iframeSource = 'https://gist.github.com/pbojinov/8965299/raw/fadf2c4058b6481646e7244994c1890f2ad81b60/iframe.html';

        // Create the iframe
        var iframe = document.createElement('iframe');
        iframe.setAttribute('src', iframeSource);
        iframe.setAttribute('id', 'the_iframe');
        iframe.style.width = 450 + 'px';
        iframe.style.height = 200 + 'px';
        document.body.appendChild(iframe);

        // Send a message to the child iframe
        var iframeEl = document.getElementById('the_iframe'),
            messageButton = document.getElementById('message_button'),
            results = document.getElementById('results');


        // Send a message to the child iframe
        var sendMessage = function(msg) {
            // Make sure you are sending a string, and to stringify JSON
            iframeEl.contentWindow.postMessage(msg, '*');
        };

        // Send random messge data on every button click
        bindEvent(messageButton, 'click', function (e) {
            var random = Math.random();
            sendMessage('' + random);
        });

        // Listen to message from child window
        bindEvent(window, 'message', function (e) {
            results.innerHTML = e.data;
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>iframe Window</title>
	<style>
	body {
	background-color: #D53C2F;
	color: white;
	}
	</style>
	</head>
	<body>

	<h1>Hello there, i'm an iframe</h1>
	<p>Send Message: <button id="message_button">Hi parent</button></p>
	<p>Got Message:</p>
	<div id="results"></div>

	<script>
	// addEventListener support for IE8
	function bindEvent(element, eventName, eventHandler) {
	if (element.addEventListener) {
	element.addEventListener(eventName, eventHandler, false);
	} else if (element.attachEvent) {
	element.attachEvent('on' + eventName, eventHandler);
	}
	}

	// Send a message to the parent
	var sendMessage = function (msg) {
	// Make sure you are sending a string, and to stringify JSON
	window.parent.postMessage(msg, '*');
	};

	var results = document.getElementById('results'),
	messageButton = document.getElementById('message_button');

	// Listen to messages from parent window
	bindEvent(window, 'message', function (e) {
	results.innerHTML = e.data;
	});

	// Send random message data on every button click
	bindEvent(messageButton, 'click', function (e) {
	var random = Math.random();
	sendMessage('' + random);
	});
	</script>
	</body>
	</html>