Realise that we'd need to be consistent about which document/window we are operating on if we are to use window.top

Author: eoghanmurray

src/record/index.ts

@@ -3,6 +3,7 @@ import initObservers from './observer';
 import {
   mirror,
   on,
+  getTopWindow,
   getWindowWidth,
   getWindowHeight,
   polyfill,
@@ -97,20 +98,21 @@ function record<T = eventWithTime>(
   };
 
   function takeFullSnapshot(isCheckout = false) {
+    const twindow = getTopWindow();
     wrappedEmit(
       wrapEvent({
         type: EventType.Meta,
         data: {
-          href: window.location.href,
+          href: twindow.location.href,
           width: getWindowWidth(),
           height: getWindowHeight(),
         },
       }),
       isCheckout,
     );
+
     const [node, idNodeMap] = snapshot(
-      window.top && window.top.document ?
-        window.top.document : document,
+      tdocument,
       blockClass,
       inlineStylesheet,
       maskInputOptions,
@@ -121,25 +123,27 @@ function record<T = eventWithTime>(
     }
 
     mirror.map = idNodeMap;
+    const twindow = getTopWindow();
+    const tdoc = twindow.document;
     wrappedEmit(
       wrapEvent({
         type: EventType.FullSnapshot,
         data: {
           node,
           initialOffset: {
             left:
-              window.pageXOffset !== undefined
-                ? window.pageXOffset
-                : document?.documentElement.scrollLeft ||
-                  document?.body?.parentElement?.scrollLeft ||
-                  document?.body.scrollLeft ||
+              twindow.pageXOffset !== undefined
+                ? twindow.pageXOffset
+                : tdoc?.documentElement.scrollLeft ||
+                  tdoc?.body?.parentElement?.scrollLeft ||
+                  tdoc?.body.scrollLeft ||
                   0,
             top:
-              window.pageYOffset !== undefined
-                ? window.pageYOffset
-                : document?.documentElement.scrollTop ||
-                  document?.body?.parentElement?.scrollTop ||
-                  document?.body.scrollTop ||
+              twindow.pageYOffset !== undefined
+                ? twindow.pageYOffset
+                : tdoc?.documentElement.scrollTop ||
+                  tdoc?.body?.parentElement?.scrollTop ||
+                  tdoc?.body.scrollTop ||
                   0,
           },
         },
@@ -255,9 +259,10 @@ function record<T = eventWithTime>(
         ),
       );
     };
+    const tdoc = getTopWindow().document;
     if (
-      document.readyState === 'interactive' ||
-      document.readyState === 'complete'
+      tdoc.readyState === 'interactive' ||
+      tdoc.readyState === 'complete'
     ) {
       init();
     } else {

src/record/observer.ts

@@ -4,6 +4,7 @@ import {
   throttle,
   on,
   hookSetter,
+  getTopWindow,
   getWindowHeight,
   getWindowWidth,
   isBlocked,
@@ -47,7 +48,8 @@ function initMutationObserver(
     maskInputOptions,
   );
   const observer = new MutationObserver(mutationBuffer.processMutations);
-  observer.observe(document, {
+  const twindow = getTopWindow();
+  observer.observe(twindow.document, {
     attributes: true,
     attributeOldValue: true,
     characterData: true,
@@ -173,8 +175,9 @@ function initScrollObserver(
       return;
     }
     const id = mirror.getId(evt.target as INode);
-    if (evt.target === document) {
-      const scrollEl = (document.scrollingElement || document.documentElement)!;
+    const tdoc = getTopWindow().document;
+    if (evt.target === tdoc) {
+      const scrollEl = (tdoc.scrollingElement || tdoc.documentElement)!;
       cb({
         id,
         x: scrollEl.scrollLeft,
@@ -247,8 +250,9 @@ function initInputObserver(
     // if a radio was checked
     // the other radios with the same name attribute will be unchecked.
     const name: string | undefined = (target as HTMLInputElement).name;
+    const tdoc = getTopWindow().document;
     if (type === 'radio' && name && isChecked) {
-      document
+      tdoc
         .querySelectorAll(`input[type="radio"][name="${name}"]`)
         .forEach((el) => {
           if (el !== target) {

src/utils.ts

@@ -156,19 +156,37 @@ export function patch(
   };
 }
 
+export function getTopWindow(): Window {
+  let twindow = window;
+  while (twindow.parent && twindow.parent != twindow) {
+    // check each parent in case the window.top.document fails, but an intermediary one would succeed
+    try {
+      let tdoc = window.parent.document;  // this can fail apparently: https://stackoverflow.com/questions/2937118
+      twindow = window.parent;
+    } catch (err) {
+      break;
+    }
+  }
+  return twindow;
+}
+
 export function getWindowHeight(): number {
+  const twindow = getTopWindow();
+  const tdoc = twindow.document;
   return (
-    window.innerHeight ||
-    (document.documentElement && document.documentElement.clientHeight) ||
-    (document.body && document.body.clientHeight)
+    twindow.innerHeight ||
+    (tdoc.documentElement && tdoc.documentElement.clientHeight) ||
+    (tdoc.body && tdoc.body.clientHeight)
   );
 }
 
 export function getWindowWidth(): number {
+  const twindow = getTopWindow();
+  const tdoc = twindow.document;
   return (
-    window.innerWidth ||
-    (document.documentElement && document.documentElement.clientWidth) ||
-    (document.body && document.body.clientWidth)
+    twindow.innerWidth ||
+    (tdoc.documentElement && tdoc.documentElement.clientWidth) ||
+    (tdoc.body && tdoc.body.clientWidth)
   );
 }