Created
April 20, 2017 10:51
-
-
Save bmrinal/26ee6a95c7a2604b202ec1f3b879de62 to your computer and use it in GitHub Desktop.
A sample iframe html for testing....
This file contains hidden or 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> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment