scroll-cross-origin-iframes.sub.html (1170B)
1 <!DOCTYPE html> 2 <div style="height: 300px"></div> 3 <script> 4 var is_setup = false; 5 var port; 6 var frame_id; 7 8 function postReplyMessage(command) { 9 const message_target = (port ? port : parent); 10 message_target.postMessage({ 11 command: command, 12 frame_id: frame_id, 13 scrollTop: document.documentElement.scrollTop 14 }, "*"); 15 } 16 17 function handleMessage(event) { 18 switch (event.data.command) { 19 case 'setup': 20 is_setup = false; 21 port = event.source; 22 frame_id = event.data.frame_id; 23 if (document.scrollingElement.scrollLeft != 0 || 24 document.scrollingElement.scrollTop != 0) { 25 document.scrollingElement.scrollTo(0, 0); 26 } else { 27 is_setup = true; 28 postReplyMessage('setup'); 29 } 30 break; 31 default: 32 break; 33 } 34 } 35 36 function handleScrollend() { 37 var command = 'onscrollend'; 38 39 if (!is_setup && 40 document.scrollingElement.scrollTop == 0 && 41 document.scrollingElement.scrollLeft == 0) { 42 is_setup = true; 43 command = 'setup'; 44 } 45 46 postReplyMessage(command); 47 } 48 49 window.addEventListener('message', handleMessage); 50 window.addEventListener('scrollend', handleScrollend); 51 </script>