Created
July 19, 2019 23:28
-
-
Save alexismellamo/3fe9edcc45d69c04331053d2af2f7f1e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment