bizfreak22 · July 7, 2020 17:04 · Mar 15, 2017 · Mar 15, 2017 · Feb 12, 2014 · Feb 12, 2014
diff --git a/README.md b/README.md
@@ -12,6 +12,6 @@ Recieve messages using `window.addEventListener('message')`
 Send messages to parent window using `window.parent.postMessage`
 Recieve messages using `window.addEventListener('message')`
 
-## Working Example:
+## Live Example
 
 [http://pbojinov.github.io/iframe-communication/](http://pbojinov.github.io/iframe-communication/)
diff --git a/README.md b/README.md
@@ -11,3 +11,7 @@ Recieve messages using `window.addEventListener('message')`
 
 Send messages to parent window using `window.parent.postMessage`
 Recieve messages using `window.addEventListener('message')`
+
+## Working Example:
+
+[http://pbojinov.github.io/iframe-communication/](http://pbojinov.github.io/iframe-communication/)
diff --git a/iframe.html b/iframe.html
@@ -47,6 +47,5 @@ <h1>Hello there, i'm an iframe</h1>
             sendMessage('' + random);
         });
     </script>
-</div>
 </body>
 </html>
diff --git a/parent.html b/parent.html
@@ -55,6 +55,5 @@ <h1>Parent Window</h1>
             results.innerHTML = e.data;
         });
     </script>
-</div>
 </body>
 </html>
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Two way iframe communication
 
-The only thing different between the two pages is the method of sending message. Recieving messages is the same in both.
+The main difference between the two pages is the method of sending messages. Recieving messages is the same in both.
 
 ## Parent
 

diff --git a/README.md b/README.md
@@ -9,5 +9,5 @@ Recieve messages using `window.addEventListener('message')`
 
 ## iframe
 
-Send messages to parent window using `window.parent.postMessag`
+Send messages to parent window using `window.parent.postMessage`
 Recieve messages using `window.addEventListener('message')`
diff --git a/parent.html b/parent.html
@@ -22,7 +22,7 @@ <h1>Parent Window</h1>
             }
         }
 
-        var iframeSource = 'https://gist.github.com/pbojinov/8965011/raw/3c9969996662b6b30d70f8e0bf7d3a7c077f385b/iframe.html';
+        var iframeSource = 'https://gist.github.com/pbojinov/8965299/raw/fadf2c4058b6481646e7244994c1890f2ad81b60/iframe.html';
 
         // Create the iframe
         var iframe = document.createElement('iframe');

diff --git a/README.md b/README.md
@@ -0,0 +1,13 @@
+# Two way iframe communication
+
+The only thing different between the two pages is the method of sending message. 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.postMessag`
+Recieve messages using `window.addEventListener('message')`
diff --git a/iframe.html b/iframe.html
@@ -0,0 +1,52 @@
+<!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>
+</div>
+</body>
+</html>
diff --git a/parent.html b/parent.html
@@ -0,0 +1,60 @@
+<!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/8965011/raw/3c9969996662b6b30d70f8e0bf7d3a7c077f385b/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>
+</div>
+</body>
+</html>