| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| iframe { |
| margin: 20px; |
| display: block; |
| } |
| |
| .wrapper { |
| position: absolute; |
| opacity: 0; |
| visibility: hidden; |
| z-index: 0; |
| left: 60px; |
| top: 10px; |
| } |
| |
| .wrapper.visible { |
| opacity: 1; |
| visibility: visible; |
| } |
| </style> |
| <script> |
| function doVisibilityChange() |
| { |
| document.querySelector('.wrapper').classList.add('visible'); |
| } |
| |
| const expectedLoads = 2; |
| let receivedLoads = 0; |
| function frameLoaded() |
| { |
| if (++receivedLoads == expectedLoads) |
| window.parent.receivedLoad(); |
| } |
| |
| window.addEventListener('load', () => { |
| frameLoaded(); |
| }, false); |
| </script> |
| </head> |
| <body> |
| <div class="wrapper"> |
| <div style="padding: 10px; position: fixed; top: 0px; left: 0px; background-color: magenta">fixed</div> |
| <iframe id="inner-frame" scrolling="no" width="400" src="become-composited.html"></iframe> |
| </div> |
| <script> |
| document.getElementById('inner-frame').addEventListener('load', () => { |
| frameLoaded(); |
| }, false); |
| </script> |
| </body> |
| </html> |
