Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Jan 8th, 2013  |  syntax: HTML 5  |  size: 1.83 KB  |  views: 59  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!-- grandparent.html : This is loaded in the browser -->
  2. <!DOCTYPE HTML>
  3. <html>
  4. <style type="text/css">
  5.     body {
  6.         color: purple;
  7.         position: relative;
  8.         box-shadow: 0 0 25px #000000;
  9.         height: 100%;
  10.         display:block;
  11.         margin:auto;
  12.         padding: 0;
  13.         text-align:  center;
  14.         width: 100%;
  15.     }
  16. </style>
  17. <body>
  18. <iframe id="grandParentFrame" src="parent.html" width="1024" height="768" frameborder="0"  scrolling="no" allowFullScreen style="border: 5px solid #0000ff"></iframe>
  19. </body>
  20. </html>
  21.  
  22. <!--parent.html -->
  23. <!DOCTYPE HTML>
  24. <html>
  25.  
  26. <body>
  27. <iframe id="parentFrame" src="child.html" width="804" height="600" frameborder="0"  scrolling="no" allowFullScreen style="border: 5px solid #00ff00"></iframe>
  28. </body>
  29. </html>
  30.  
  31. <!--child.html-->
  32. <!DOCTYPE HTML>
  33. <html>
  34. <head>
  35.   <script>
  36.  
  37.         fullscreenHandler = function (){
  38.                         /* This doesn't work*/
  39.                         var frame = parent.document.getElementById('parentFrame');
  40.                         /* This works */
  41.                         var frame = parent.parent.document.getElementById('grandParentFrame');
  42.             if (frame.mozRequestFullScreen) {
  43.                 // This is how to go into fullscren mode in Firefox
  44.                 // Note the "moz" prefix, which is short for Mozilla.
  45.                 frame.mozRequestFullScreen();
  46.             } else if (frame.webkitRequestFullScreen) {
  47.                 // This is how to go into fullscreen mode in Chrome and Safari
  48.                 // Both of those browsers are based on the Webkit project, hence the same prefix.
  49.                 frame.webkitRequestFullScreen();
  50.             }
  51.          
  52.         }
  53.  
  54.     </script>
  55. </head>
  56.  
  57. <body>
  58.     <div style="border: 5px solid #000000" width="300" height="300">
  59.         <input type="submit" value="FullScreen" onclick="fullscreenHandler()">
  60.     </div>
  61. </body>
  62. </html>
clone this paste RAW Paste Data