| <!DOCTYPE html> |
| <style> |
| html, body { |
| margin: 0; |
| } |
| #target { |
| width: 100px; |
| height: 100px; |
| } |
| </style> |
| |
| <div id="target">target</div> |
| |
| <script> |
| var delay = 100; |
| var results = []; |
| |
| function waitForNotification(f) { |
| setTimeout(() => { |
| requestAnimationFrame(function () { |
| requestAnimationFrame(function () { |
| setTimeout(f) |
| }) |
| }) |
| }, delay) |
| } |
| |
| window.addEventListener("message", event => { |
| waitForNotification(() => { |
| window.parent.postMessage(results.map(e => e.isVisible), "*"); |
| results = []; |
| }); |
| }); |
| |
| onload = () => { |
| var target = document.getElementById("target"); |
| var observer = new IntersectionObserver(entries => { |
| results = entries; |
| }, {trackVisibility: true, delay: delay}); |
| observer.observe(document.getElementById("target")); |
| window.parent.postMessage("", "*"); |
| }; |
| </script> |
