The page holding the iFrame as specified here would need to be tweaked to be like so:
<!DOCTYPE html>
<html>
<body>
<script context="text/javascript">
var theOtherWorld;
function findTheOtherWorld(world) {
theOtherWorld = world;
};
function reachIntoTheOtherWorld() {
theOtherWorld.postMessage("letmein", "http://bar");
};
function receiveMessage(event) {
if (event.origin == "http://bar") {
alert(event.data);
}
};
if (window.addEventListener) {
window.addEventListener("message", receiveMessage, false);
} else {
window.attachEvent("onmessage", receiveMessage);
};
</script>
<p>This page holds an iframe at: "foo"</p>
<iframe name="eye" src="http://bar/index.html"
onload="findTheOtherWorld(window.eye);">
</iframe>
<div>
<button onClick="reachIntoTheOtherWorld();">reach into the iFrame</button>
</div>
</body>
</html>
The actual content in the iFrame looks like this now:
<!DOCTYPE html>
<html>
<body>
<script context="text/javascript">
var cat = {
name: "Patches",
color: "Calico",
about: function() {
return this.name + " is " + this.color;
}
};
function receiveMessage(event) {
if (event.data == "letmein") {
if (event.origin == "http://foo") {
top.postMessage(cat.about(), "http://foo");
}
}
};
if (window.addEventListener) {
window.addEventListener("message", receiveMessage, false);
} else {
window.attachEvent("onmessage", receiveMessage);
};
</script>
<p>This page sits inside an iframe at: "bar"</p>
</body>
</html>
No comments:
Post a Comment