intersectionobserver_window.html (1653B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style> 5 #target5 { 6 position: absolute; 7 top: 0px; 8 left: 0px; 9 width: 20px; 10 height: 20px; 11 background: #f00; 12 } 13 </style> 14 <body> 15 <div id="target"></div> 16 <script> 17 var io = new IntersectionObserver(function(records) { 18 var viewportWidth = 19 document.documentElement.clientWidth || document.body.clientWidth; 20 var viewportHeight = 21 document.documentElement.clientHeight || document.body.clientHeight; 22 var result = records.length === 1 && 23 records[0].rootBounds.top === 0 && 24 records[0].rootBounds.left === 0 && 25 records[0].rootBounds.right === viewportWidth && 26 records[0].rootBounds.width === viewportWidth && 27 records[0].rootBounds.bottom === viewportHeight && 28 records[0].rootBounds.height === viewportHeight; 29 if (!result) { 30 result = [records.length, 31 records[0].isIntersecting, 32 records[0].rootBounds.top, 33 records[0].rootBounds.left, 34 records[0].rootBounds.right, 35 records[0].rootBounds.width, 36 records[0].rootBounds.bottom, 37 records[0].rootBounds.height, 38 viewportWidth, 39 viewportHeight].join(','); 40 } 41 window.opener.postMessage(result, '*'); 42 }); 43 io.observe(document.getElementById("target")); 44 </script> 45 </body> 46 </html>