Skip to content

Instantly share code, notes, and snippets.

@OdinsHat

OdinsHat/iframe.html

Last active August 29, 2015 14:21
Show Gist options
  • Save OdinsHat/a68c763a83f33d4cbe4b to your computer and use it in GitHub Desktop.
Save OdinsHat/a68c763a83f33d4cbe4b to your computer and use it in GitHub Desktop.
Download ZIP
Example of postMessage() functionality made available in HTML5 (very rough and basic proof of concept example)
Raw
iframe.html
<DOCTYPE html>
<html>
<head>
<title>The iFrame file included in the above parent page</title>
</head>
<body>
<script type="text/javascript">
/**
* This will send every second
*/
setInterval(function() {
/**
* The second parameter of the postMessage method must be the same as the
* domain it is passing the message to for it to work.
*/
parent.postMessage("THE MESSAGE TO SEND TO THE PARENT PAGE", "http://parentsite.com");
}, 1000);
</script>
</body>
</html>
Raw
parent.html
<DOCTYPE html>
<html>
<head>
<title>Parent Page</title>
</head>
<body>
<h1 id="alter-me"></h1>
<script type="text/javascript">
/**
* Compatibility stuff for it to work in all browsers.
*/
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
/**
* This listens to the evcent from the child iframe page
*/
eventer(messageEvent,function(event) {
document.getElementById('alter-me').innerHTML = event.data;
},false);
</script>
<iframe src="http://somesite.com/iframe.html" style="width:930px;height:900px;border:none!important;"></iframe>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment