| <!DOCTYPE html> |
| <div id='target'>Hello, world!</div> |
| |
| <script> |
| let observer = null; |
| let trackVisibility = true; |
| |
| addEventListener("message", event => { |
| if (observer) { |
| observer.disconnect(); |
| observer = null; |
| requestAnimationFrame(() => { |
| setTimeout(() => { |
| event.source.postMessage({expected: false}, "*"); |
| }); |
| }); |
| } else { |
| observer = new IntersectionObserver( |
| entries => {}, {trackVisibility: trackVisibility, delay: 100}); |
| observer.observe(document.getElementById('target')); |
| requestAnimationFrame(() => { |
| setTimeout(() => { |
| event.source.postMessage({expected: trackVisibility}, "*"); |
| trackVisibility = !trackVisibility; |
| }); |
| }); |
| } |
| }); |
| </script> |
