<!-- grandparent.html : This is loaded in the browser -->
<!DOCTYPE HTML>
<html>
<style type="text/css">
body {
color: purple;
position: relative;
box-shadow: 0 0 25px #000000;
height: 100%;
display:block;
margin:auto;
padding: 0;
text-align: center;
width: 100%;
}
</style>
<body>
<iframe id="grandParentFrame" src="parent.html" width="1024" height="768" frameborder="0" scrolling="no" allowFullScreen style="border: 5px solid #0000ff"></iframe>
</body>
</html>
<!--parent.html -->
<!DOCTYPE HTML>
<html>
<body>
<iframe id="parentFrame" src="child.html" width="804" height="600" frameborder="0" scrolling="no" allowFullScreen style="border: 5px solid #00ff00"></iframe>
</body>
</html>
<!--child.html-->
<!DOCTYPE HTML>
<html>
<head>
<script>
fullscreenHandler = function (){
/* This doesn't work*/
var frame = parent.document.getElementById('parentFrame');
/* This works */
var frame = parent.parent.document.getElementById('grandParentFrame');
if (frame.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
frame.mozRequestFullScreen();
} else if (frame.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
frame.webkitRequestFullScreen();
}
}
</script>
</head>
<body>
<div style="border: 5px solid #000000" width="300" height="300">
<input type="submit" value="FullScreen" onclick="fullscreenHandler()">
</div>
</body>
</html>