Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Kommunikation vom Iframe to Parent

Kommunikation vom Iframe to Parent

Nachrichten oder Befehle von Iframe zu der Parent Seite schicken und auch andersrum.

Der hier verwendete Code

<!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/> <iframe style="height:300px;width:400px" id="the_iframe" srcdoc="<!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> "></iframe> <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 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>