[amp-iframe] iframe viewability (#36131)

ampproject · Oct 1, 2021 · f23e77d · f23e77d
1 parent db1659d
commit f23e77d
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 5 deletions.
diff --git a/examples/bento/amp-iframe-send-intersections-example.html b/examples/bento/amp-iframe-send-intersections-example.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+  </head>
+  <body>
+    <h3>Intersection Ratios:</h3>
+    <p id="intersections"></p>
+    <script>
+      window.parent.postMessage(
+        {
+          sentinel: 'amp',
+          type: 'send-intersections',
+        },
+        '*'
+      );
+      window.addEventListener('message', (event) => {
+        if (event.data.sentinel !== 'amp' && event.data.type !== 'intersection') {
+          return;
+        }
+        const node = document.getElementById('intersections');
+        event.data.changes.forEach((change) => {
+          node.innerHTML += '<p>' + change.intersectionRatio + '</p>';
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/extensions/amp-iframe/1.0/component.js b/extensions/amp-iframe/1.0/component.js
@@ -5,6 +5,12 @@ import {toWin} from '#core/window';
 import {ContainWrapper, useIntersectionObserver} from '#preact/component';
 import {setStyle} from '#core/dom/style';
 import {useMergeRefs} from '#preact/utils';
+import {
+  DEFAULT_THRESHOLD,
+  cloneEntryForCrossOrigin,
+} from '../../../src/utils/intersection-observer-3p-host';
+import {postMessage} from '../../../src/iframe-helper';
+import {dict} from '#core/types/object';
 
 const NOOP = () => {};
 
@@ -28,6 +34,57 @@ export function BentoIframe({
   const dataRef = useRef(null);
   const isIntersectingRef = useRef(null);
   const containerRef = useRef(null);
+  const observerRef = useRef(null);
+  const targetOriginRef = useRef(null);
+
+  const viewabilityCb = (entries) => {
+    const iframe = iframeRef.current;
+    const targetOrigin = targetOriginRef.current;
+    if (!iframe || !targetOrigin) {
+      return;
+    }
+    postMessage(
+      iframe,
+      MessageType.INTERSECTION,
+      dict({'changes': entries.map(cloneEntryForCrossOrigin)}),
+      targetOrigin
+    );
+  };
+
+  const handleSendIntersectionsPostMessage = useCallback((event) => {
+    const iframe = iframeRef.current;
+    if (!iframe) {
+      return;
+    }
+    if (
+      event.source !== iframe.contentWindow ||
+      event.data?.type !== MessageType.SEND_INTERSECTIONS
+    ) {
+      return;
+    }
+    targetOriginRef.current = event.origin;
+    const win = toWin(iframe.ownerDocument.defaultView);
+    observerRef.current = new win.IntersectionObserver(viewabilityCb, {
+      threshold: DEFAULT_THRESHOLD,
+    });
+    observerRef.current.observe(iframe);
+  }, []);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) {
+      return;
+    }
+    const win = toWin(iframe.ownerDocument.defaultView);
+    win.addEventListener('message', handleSendIntersectionsPostMessage);
+    let observer = observerRef.current;
+
+    return () => {
+      observer?.unobserve(iframe);
+      observer = null;
+      win.removeEventListener('message', handleSendIntersectionsPostMessage);
+    };
+  }, [handleSendIntersectionsPostMessage]);
 
   const updateContainerSize = (height, width) => {
     const container = containerRef.current;
@@ -70,7 +127,7 @@ export function BentoIframe({
     }
   }, [requestResize]);
 
-  const handlePostMessage = useCallback(
+  const handleEmbedSizePostMessage = useCallback(
     (event) => {
       if (event.data?.type !== MessageType.EMBED_SIZE) {
         return;
@@ -98,12 +155,12 @@ export function BentoIframe({
       return;
     }
 
-    win.addEventListener('message', handlePostMessage);
+    win.addEventListener('message', handleEmbedSizePostMessage);
 
     return () => {
-      win.removeEventListener('message', handlePostMessage);
+      win.removeEventListener('message', handleEmbedSizePostMessage);
     };
-  }, [handlePostMessage]);
+  }, [handleEmbedSizePostMessage]);
 
   const ioCallback = useCallback(
     ({isIntersecting}) => {

diff --git a/extensions/amp-iframe/1.0/storybook/Basic.js b/extensions/amp-iframe/1.0/storybook/Basic.js
@@ -68,3 +68,27 @@ export const WithResizableIframe = () => {
 };
 
 WithResizableIframe.storyName = 'Resizable iframe outside viewport';
+
+export const WithSendIntersectionsPostMessage = () => {
+  return (
+    <div>
+      <div
+        style={{
+          width: '100%',
+          height: '110vh', // so that iframe is outside viewport
+          backgroundColor: 'blue',
+        }}
+      ></div>
+      <Iframe
+        style={{width: 500, height: 500}}
+        iframeStyle={{border: '1px solid black'}}
+        sandbox="allow-scripts allow-same-origin"
+        src="/examples/bento/amp-iframe-send-intersections-example.html"
+      >
+        <div placeholder>Placeholder</div>
+      </Iframe>
+    </div>
+  );
+};
+
+WithSendIntersectionsPostMessage.storyName = 'Send intersections';
diff --git a/src/utils/intersection-observer-3p-host.js b/src/utils/intersection-observer-3p-host.js
@@ -186,7 +186,7 @@ function calculateChangeEntry(element, hostViewport, intersection, ratio) {
  * @param {!IntersectionObserverEntry} entry
  * @return {!IntersectionObserverEntry}
  */
-function cloneEntryForCrossOrigin(entry) {
+export function cloneEntryForCrossOrigin(entry) {
   return /** @type {!IntersectionObserverEntry} */ ({
     'time': entry.time,
     'rootBounds': entry.rootBounds,