iframe-resizer 4.4.4 → 5.1.5-beta.1

package/js/iframeResizer.js

@@ -1,204 +1,246 @@
-/*
- * File: iframeResizer.js
- * Desc: Force iframes to size to content.
- * Requires: iframeResizer.contentWindow.js to be loaded into the target frame.
- * Doc: https://iframe-resizer.com
- * Author: David J. Bradshaw - info@iframe-resizer.com
+/*!
+ *  @preserve
+ *  
+ *  @module     iframe-resizer/legacy (parent) 5.1.5-beta.1 (umd) - 2024-07-10
+ *
+ *  @license    GPL-3.0 for non-commercial use only.
+ *              For commercial use, you must purchase a license from
+ *              https://iframe-resizer.com/pricing
+ * 
+ *  @desciption Keep same and cross domain iFrames sized to their content 
+ *
+ *  @author     David J. Bradshaw <info@iframe-resizer.com>
+ * 
+ *  @see        {@link https://iframe-resizer.com}
+ * 
+ *  @copyright  (c) 2013 - 2024, David J. Bradshaw. All rights reserved.
  */
 
-console.info(`
-IFRAME-RESIZER
 
-Iframe-Resizer 5 is now available via the following two packages:
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.iframeResize = factory());
+})(this, (function () { 'use strict';
 
- * @iframe-resizer/parent
- * @iframe-resizer/child
+  const msg = `IFRAME-RESIZER 5
 
-Additionally their are also new versions of iframe-resizer for React, Vue, and jQuery.
+This package has been split into separate packages for Parent and Child pages. Along with new packages for jQuery, React and Vue.
 
 Version 5 of iframe-resizer has been extensively rewritten to use modern browser APIs, which has enabled significantly better performance and greater accuracy in the detection of content resizing events.
 
 Please see https://iframe-resizer.com/upgrade for more details.
-`)
-
-// eslint-disable-next-line sonarjs/cognitive-complexity, no-shadow-restricted-names
-;(function (undefined) {
-  if (typeof window === 'undefined') return // don't run for server side render
-
-  // var VERSION = '4.3.11'
-
-  var count = 0,
-    destroyObserver,
-    logEnabled = false,
-    hiddenCheckEnabled = false,
-    msgHeader = 'message',
-    msgHeaderLen = msgHeader.length,
-    msgId = '[iFrameSizer]', // Must match iframe msg ID
-    msgIdLen = msgId.length,
-    pagePosition = null,
-    requestAnimationFrame = window.requestAnimationFrame,
-    resetRequiredMethods = Object.freeze({
-      max: 1,
-      scroll: 1,
-      bodyScroll: 1,
-      documentElementScroll: 1
-    }),
-    settings = {},
-    timer = null,
-    defaults = Object.freeze({
-      autoResize: true,
-      bodyBackground: null,
-      bodyMargin: null,
-      bodyMarginV1: 8,
-      bodyPadding: null,
-      checkOrigin: true,
-      inPageLinks: false,
-      enablePublicMethods: true,
-      heightCalculationMethod: 'bodyOffset',
-      id: 'iFrameResizer',
-      interval: 32,
-      license: '1jqr0si6pnt',
-      log: false,
-      maxHeight: Infinity,
-      maxWidth: Infinity,
-      minHeight: 0,
-      minWidth: 0,
-      mouseEvents: true,
-      resizeFrom: 'parent',
-      scrolling: false,
-      sizeHeight: true,
-      sizeWidth: false,
-      warningTimeout: 5000,
-      tolerance: 0,
-      widthCalculationMethod: 'scroll',
-      onClose: function () {
-        return true
-      },
-      onClosed: function () {},
-      onInit: function () {},
-      onMessage: function () {
-        warn('onMessage function not defined')
-      },
-      onMouseEnter: function () {},
-      onMouseLeave: function () {},
-      onResized: function () {},
-      onScroll: function () {
-        return true
-      }
-    })
-
-  function getMutationObserver() {
-    return (
-      window.MutationObserver ||
-      window.WebKitMutationObserver ||
-      window.MozMutationObserver
-    )
-  }
+`;
 
-  function addEventListener(el, evt, func) {
-    el.addEventListener(evt, func, false)
-  }
+  console.warn(msg);
 
-  function removeEventListener(el, evt, func) {
-    el.removeEventListener(evt, func, false)
-  }
+  const encode = (s) =>
+    s
+      .replaceAll('<br>', '\n')
+      .replaceAll('<rb>', '\u001B[31;1m')
+      .replaceAll('</>', '\u001B[m')
+      .replaceAll('<b>', '\u001B[1m')
+      .replaceAll('<i>', '\u001B[3m')
+      .replaceAll('<u>', '\u001B[4m');
 
-  function setupRequestAnimationFrame() {
-    var vendors = ['moz', 'webkit', 'o', 'ms']
-    var x
+  const remove = (s) => s.replaceAll('<br>', '\n').replaceAll(/<[/a-z]+>/gi, '');
 
-    // Remove vendor prefixing if prefixed and break early if not
-    for (x = 0; x < vendors.length && !requestAnimationFrame; x += 1) {
-      requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']
-    }
+  const formatAdvise = (formatLogMsg) => (msg) =>
+    window.chrome // Only show formatting in Chrome as not supported in other browsers
+      ? formatLogMsg(encode(msg))
+      : formatLogMsg(remove(msg));
 
-    if (requestAnimationFrame) {
-      // Firefox extension content-scripts have a globalThis object that is not the same as window.
-      // Binding `requestAnimationFrame` to window allows the function to work and prevents errors
-      // being thrown when run in that context, and should be a no-op in every other context.
-      requestAnimationFrame = requestAnimationFrame.bind(window)
-    } else {
-      log('setup', 'RequestAnimationFrame not supported')
-    }
+  const msgId$1 = '[iframe-resizer]';
+
+  function setLogEnabled(enabled) {
   }
 
   function getMyID(iframeId) {
-    var retStr = 'Host page: ' + iframeId
-
-    if (window.top !== window.self) {
-      retStr =
-        window.parentIFrame && window.parentIFrame.getId
-          ? window.parentIFrame.getId() + ': ' + iframeId
-          : 'Nested host page: ' + iframeId
+    if (window.top === window.self) {
+      return `Parent page: ${iframeId}`
     }
 
-    return retStr
+    return window?.parentIFrame?.getId
+      ? `${window.parentIFrame.getId()}: ${iframeId}`
+      : `Nested parent page: ${iframeId}`
   }
 
-  function formatLogHeader(iframeId) {
-    return msgId + '[' + getMyID(iframeId) + ']'
-  }
+  const formatLogHeader = (iframeId) => `${msgId$1}[${getMyID(iframeId)}]`;
 
-  function isLogEnabled(iframeId) {
-    return settings[iframeId] ? settings[iframeId].log : logEnabled
-  }
+  const formatLogMsg =
+    (iframeId) =>
+    (...msg) =>
+      [`${msgId$1}[${iframeId}]`, ...msg].join(' ');
 
-  function log(iframeId, msg) {
-    output('log', iframeId, msg, isLogEnabled(iframeId))
-  }
+  const output = (type, iframeId, ...msg) =>
+    // eslint-disable-next-line no-console
+    window?.console[type](formatLogHeader(iframeId), ...msg);
 
-  function info(iframeId, msg) {
-    output('info', iframeId, msg, isLogEnabled(iframeId))
-  }
+  const info = (iframeId, ...msg) => output('info', iframeId, ...msg);
 
-  function warn(iframeId, msg) {
-    output('warn', iframeId, msg, true)
-  }
+  const warn = (iframeId, ...msg) => output('warn', iframeId, ...msg);
 
-  function output(type, iframeId, msg, enabled) {
-    if (true === enabled && 'object' === typeof window.console) {
-      // eslint-disable-next-line no-console
-      console[type](formatLogHeader(iframeId), msg)
-    }
-  }
+  const advise = (iframeId, msg) =>
+    // eslint-disable-next-line no-console
+    console?.warn(formatAdvise(formatLogMsg(iframeId))(msg));
 
-  function iFrameListener(event) {
-    function resizeIFrame() {
-      function resize() {
-        setSize(messageData)
-        setPagePosition(iframeId)
-        on('onResized', messageData)
-      }
+  const VERSION = '5.1.5-beta.1';
 
-      ensureInRange('Height')
-      ensureInRange('Width')
+  const msgHeader = 'message';
+  const msgHeaderLen = msgHeader.length;
+  const msgId = '[iFrameSizer]'; // Must match iframe msg ID
+  const msgIdLen = msgId.length;
+  const resetRequiredMethods = Object.freeze({
+    max: 1,
+    scroll: 1,
+    bodyScroll: 1,
+    documentElementScroll: 1,
+  });
 
-      syncResize(resize, messageData, 'init')
-    }
+  const addEventListener = (el, evt, func, options) =>
+    el.addEventListener(evt, func, options || false);
 
-    function processMsg() {
-      var data = msg.slice(msgIdLen).split(':')
-      var height = data[1] ? parseInt(data[1], 10) : 0
-      var iframe = settings[data[0]] && settings[data[0]].iframe
-      var compStyle = getComputedStyle(iframe)
+  const removeEventListener = (el, evt, func) =>
+    el.removeEventListener(evt, func, false);
 
-      return {
-        iframe: iframe,
-        id: data[0],
-        height: height + getPaddingEnds(compStyle) + getBorderEnds(compStyle),
-        width: data[2],
-        type: data[3]
-      }
+  const l = (l) => {
+      if (!l) return ''
+      let p = -559038744,
+        y = 1103547984;
+      for (let z, t = 0; t < l.length; t++)
+        (z = l.codePointAt(t)),
+          (p = Math.imul(p ^ z, 2246822519)),
+          (y = Math.imul(y ^ z, 3266489917));
+      return (
+        (p ^= Math.imul(p ^ (y >>> 15), 1935289751)),
+        (y ^= Math.imul(y ^ (p >>> 15), 3405138345)),
+        (p ^= y >>> 16),
+        (y ^= p >>> 16),
+        (2097152 * (y >>> 0) + (p >>> 11)).toString(36)
+      )
+    },
+    p = (l) =>
+      l.replaceAll(/[A-Za-z]/g, (l) =>
+        String.fromCodePoint(
+          (l <= 'Z' ? 90 : 122) >= (l = l.codePointAt(0) + 19) ? l : l - 26,
+        ),
+      ),
+    y = [
+      '<iy><yi>Puchspk Spjluzl Rlf</><iy><iy>',
+      '<iy><yi>Tpzzpun Spjluzl Rlf</><iy><iy>',
+      'Aopz spiyhyf pz hchpshisl dpao ivao Jvttlyjphs huk Vwlu-Zvbyjl spjluzlz.<iy><iy><i>Jvttlyjphs Spjluzl</><iy>Mvy jvttlyjphs bzl, <p>pmyhtl-ylzpgly</> ylxbpylz h svd jvza vul aptl spjluzl mll. Mvy tvyl pumvythapvu cpzpa <b>oaawz://pmyhtl-ylzpgly.jvt/wypjpun</>.<iy><iy><i>Vwlu Zvbyjl Spjluzl</><iy>Pm fvb hyl bzpun aopz spiyhyf pu h uvu-jvttlyjphs vwlu zvbyjl wyvqlja aolu fvb jhu bzl pa mvy myll bukly aol alytz vm aol NWS C3 Spjluzl. Av jvumpyt fvb hjjlwa aolzl alytz, wslhzl zla aol <i>spjluzl</> rlf pu <p>pmyhtl-ylzpgly</> vwapvuz av <i>NWSc3</>.<iy><iy>Mvy tvyl pumvythapvu wslhzl zll: <b>oaawz://pmyhtl-ylzpgly.jvt/nws</>',
+      '<i>NWSc3 Spjluzl Clyzpvu</><iy><iy>Aopz clyzpvu vm <p>pmyhtl-ylzpgly</> pz ilpun bzlk bukly aol alytz vm aol <i>NWS C3</> spjluzl. Aopz spjluzl hssvdz fvb av bzl <p>pmyhtl-ylzpgly</> pu Vwlu Zvbyjl wyvqljaz, iba pa ylxbpylz fvby wyvqlja av il wbispj, wyvcpkl haaypibapvu huk il spjluzlk bukly clyzpvu 3 vy shaly vm aol NUB Nlulyhs Wbispj Spjluzl.<iy><iy>Pm fvb hyl bzpun aopz spiyhyf pu h uvu-vwlu zvbyjl wyvqlja vy dlizpal, fvb dpss ullk av wbyjohzl h svd jvza vul aptl jvttlyjphs spjluzl.<iy><iy>Mvy tvyl pumvythapvu cpzpa <b>oaawz://pmyhtl-ylzpgly.jvt/wypjpun</>.',
+    ],
+    z = ['NWSc3', 'zvsv', 'wyv', 'ibzpulzz', 'vlt'],
+    t = Object.fromEntries(
+      [
+        '2cgs7fdf4xb',
+        '1c9ctcccr4z',
+        '1q2pc4eebgb',
+        'ueokt0969w',
+        'w2zxchhgqz',
+        '1umuxblj2e5',
+      ].map((l, p) => [l, Math.max(0, p - 1)]),
+    );
+  const getModeData = (l) => p(y[l]);
+  const getModeLabel = (l) => p(z[l]);
+  const setMode = (y) => {
+    const z = y[p('spjluzl')];
+    if (!z) return -1
+    const u = z.split('-');
+    let v = (function (y = '') {
+      let z = -2;
+      const u = l(p(y));
+      return u in t && (z = t[u]), z
+    })(u[0]);
+    return 0 === v || ((p) => p[2] === l(p[0] + p[1]))(u) || (v = -2), v
+  };
+
+  const once = (fn) => {
+    let done = false;
+
+    return function () {
+      return done
+        ? undefined
+        : ((done = true), Reflect.apply(fn, this, arguments))
+    }
+  };
+
+  const settings = {};
+
+  const onReadyDeprecated = (messageData) => {
+    if (typeof settings[messageData.id].onInit === 'function') {
+      advise(
+        messageData.id,
+        `
+\u001B[31;1mDeprecated Option\u001B[m
+
+The \u001B[1monInit()\u001B[m function is deprecated and has been replaced with \u001B[1monReady()\u001B[m. It will be removed in a future version of iFrame Resizer.
+      `,
+      );
+      settings[messageData.id].onInit(messageData);
+    }
+  };
+
+  const defaults = Object.freeze({
+    autoResize: true,
+    bodyBackground: null,
+    bodyMargin: null,
+    bodyPadding: null,
+    checkOrigin: true,
+    direction: 'vertical',
+    inPageLinks: false,
+    heightCalculationMethod: 'auto',
+    id: 'iFrameResizer',
+    log: false,
+    license: undefined,
+    mouseEvents: true,
+    offsetHeight: null,
+    offsetWidth: null,
+    postMessageTarget: null,
+    sameDomain: false,
+    scrolling: false,
+    sizeHeight: true,
+    // sizeSelector: '',
+    sizeWidth: false,
+    warningTimeout: 5000,
+    tolerance: 0,
+    waitForLoad: false,
+    widthCalculationMethod: 'auto',
+    onClose: () => true,
+    onClosed() {},
+    onInit: false,
+    onMessage: null,
+    onMouseEnter() {},
+    onMouseLeave() {},
+    onReady: onReadyDeprecated,
+    onResized() {},
+    onScroll: () => true,
+  });
+
+  const page = {
+    position: null,
+    version: VERSION,
+  };
+
+  function iframeListener(event) {
+    function resizeIFrame() {
+      setSize(messageData);
+      setPagePosition();
+
+      on('onResized', messageData);
     }
 
     function getPaddingEnds(compStyle) {
       if (compStyle.boxSizing !== 'border-box') {
         return 0
       }
-      var top = compStyle.paddingTop ? parseInt(compStyle.paddingTop, 10) : 0
-      var bot = compStyle.paddingBottom
+
+      const top = compStyle.paddingTop ? parseInt(compStyle.paddingTop, 10) : 0;
+      const bot = compStyle.paddingBottom
         ? parseInt(compStyle.paddingBottom, 10)
-        : 0
+        : 0;
+
       return top + bot
     }
 
@@ -206,78 +248,68 @@ Please see https://iframe-resizer.com/upgrade for more details.
       if (compStyle.boxSizing !== 'border-box') {
         return 0
       }
-      var top = compStyle.borderTopWidth
+
+      const top = compStyle.borderTopWidth
         ? parseInt(compStyle.borderTopWidth, 10)
-        : 0
-      var bot = compStyle.borderBottomWidth
+        : 0;
+      const bot = compStyle.borderBottomWidth
         ? parseInt(compStyle.borderBottomWidth, 10)
-        : 0
+        : 0;
+
       return top + bot
     }
 
-    function ensureInRange(Dimension) {
-      var max = Number(settings[iframeId]['max' + Dimension]),
-        min = Number(settings[iframeId]['min' + Dimension]),
-        dimension = Dimension.toLowerCase(),
-        size = Number(messageData[dimension])
-
-      log(iframeId, 'Checking ' + dimension + ' is in range ' + min + '-' + max)
-
-      if (size < min) {
-        size = min
-        log(iframeId, 'Set ' + dimension + ' to min value')
-      }
+    function processMsg() {
+      const data = msg.slice(msgIdLen).split(':');
+      const height = data[1] ? Number(data[1]) : 0;
+      const iframe = settings[data[0]]?.iframe;
+      const compStyle = getComputedStyle(iframe);
 
-      if (size > max) {
-        size = max
-        log(iframeId, 'Set ' + dimension + ' to max value')
+      return {
+        iframe,
+        id: data[0],
+        height: height + getPaddingEnds(compStyle) + getBorderEnds(compStyle),
+        width: Number(data[2]),
+        type: data[3],
+        msg: data[4],
       }
-
-      messageData[dimension] = '' + size
     }
 
     function isMessageFromIFrame() {
       function checkAllowedOrigin() {
         function checkList() {
-          var i = 0,
-            retCode = false
-
-          log(
-            iframeId,
-            'Checking connection is from allowed list of origins: ' +
-              checkOrigin
-          )
+          let i = 0;
+          let retCode = false;
 
           for (; i < checkOrigin.length; i++) {
             if (checkOrigin[i] === origin) {
-              retCode = true
+              retCode = true;
               break
             }
           }
+
           return retCode
         }
 
         function checkSingle() {
-          var remoteHost = settings[iframeId] && settings[iframeId].remoteHost
-          log(iframeId, 'Checking connection is from: ' + remoteHost)
+          const remoteHost = settings[iframeId]?.remoteHost;
           return origin === remoteHost
         }
 
         return checkOrigin.constructor === Array ? checkList() : checkSingle()
       }
 
-      var origin = event.origin,
-        checkOrigin = settings[iframeId] && settings[iframeId].checkOrigin
+      const { origin, sameDomain } = event;
 
-      if (checkOrigin && '' + origin !== 'null' && !checkAllowedOrigin()) {
+      if (sameDomain) {
+        return true
+      }
+
+      let checkOrigin = settings[iframeId]?.checkOrigin;
+
+      if (checkOrigin && `${origin}` !== 'null' && !checkAllowedOrigin()) {
         throw new Error(
-          'Unexpected message received from: ' +
-            origin +
-            ' for ' +
-            messageData.iframe.id +
-            '. Message was: ' +
-            event.data +
-            '. This error can be disabled by setting the checkOrigin: false option or by providing of array of trusted domains.'
+          `Unexpected message received from: ${origin} for ${messageData.iframe.id}. Message was: ${event.data}. This error can be disabled by setting the checkOrigin: false option or by providing of array of trusted domains.`,
         )
       }
 
@@ -286,7 +318,7 @@ Please see https://iframe-resizer.com/upgrade for more details.
 
     function isMessageForUs() {
       return (
-        msgId === ('' + msg).slice(0, msgIdLen) &&
+        msgId === `${msg}`.slice(0, msgIdLen) &&
         msg.slice(msgIdLen).split(':')[0] in settings
       ) // ''+Protects against non-string msg
     }
@@ -294,11 +326,7 @@ Please see https://iframe-resizer.com/upgrade for more details.
     function isMessageFromMetaParent() {
       // Test if this message is from a parent above us. This is an ugly test, however, updating
       // the message format would break backwards compatibility.
-      var retCode = messageData.type in { true: 1, false: 1, undefined: 1 }
-
-      if (retCode) {
-        log(iframeId, 'Ignoring init message from meta parent page')
-      }
+      const retCode = messageData.type in { true: 1, false: 1, undefined: 1 };
 
       return retCode
     }
@@ -308,412 +336,490 @@ Please see https://iframe-resizer.com/upgrade for more details.
     }
 
     function forwardMsgFromIFrame(msgBody) {
-      log(
-        iframeId,
-        'onMessage passed: {iframe: ' +
-          messageData.iframe.id +
-          ', message: ' +
-          msgBody +
-          '}'
-      )
 
       on('onMessage', {
         iframe: messageData.iframe,
-        message: JSON.parse(msgBody)
-      })
-
-      log(iframeId, '--')
+        message: JSON.parse(msgBody),
+      });
     }
 
     function getPageInfo() {
-      var bodyPosition = document.body.getBoundingClientRect(),
-        iFramePosition = messageData.iframe.getBoundingClientRect()
+      const bodyPosition = document.body.getBoundingClientRect();
+      const iFramePosition = messageData.iframe.getBoundingClientRect();
+      const { scrollY, scrollX, innerHeight, innerWidth } = window;
+      const { clientHeight, clientWidth } = document.documentElement;
 
       return JSON.stringify({
         iframeHeight: iFramePosition.height,
         iframeWidth: iFramePosition.width,
-        clientHeight: Math.max(
-          document.documentElement.clientHeight,
-          window.innerHeight || 0
-        ),
-        clientWidth: Math.max(
-          document.documentElement.clientWidth,
-          window.innerWidth || 0
-        ),
+        clientHeight: Math.max(clientHeight, innerHeight || 0),
+        clientWidth: Math.max(clientWidth, innerWidth || 0),
         offsetTop: parseInt(iFramePosition.top - bodyPosition.top, 10),
         offsetLeft: parseInt(iFramePosition.left - bodyPosition.left, 10),
-        scrollTop: window.pageYOffset,
-        scrollLeft: window.pageXOffset,
-        documentHeight: document.documentElement.clientHeight,
-        documentWidth: document.documentElement.clientWidth,
-        windowHeight: window.innerHeight,
-        windowWidth: window.innerWidth
+        scrollTop: scrollY,
+        scrollLeft: scrollX,
+        documentHeight: clientHeight,
+        documentWidth: clientWidth,
+        windowHeight: innerHeight,
+        windowWidth: innerWidth,
       })
     }
 
-    function sendPageInfoToIframe(iframe, iframeId) {
-      function debouncedTrigger() {
-        trigger('Send Page Info', 'pageInfo:' + getPageInfo(), iframe, iframeId)
-      }
-      debounceFrameEvents(debouncedTrigger, 32, iframeId)
+    function getParentProps() {
+      const { iframe } = messageData;
+      const { scrollWidth, scrollHeight } = document.documentElement;
+      const { width, height, offsetLeft, offsetTop, pageLeft, pageTop, scale } =
+        window.visualViewport;
+
+      return JSON.stringify({
+        iframe: iframe.getBoundingClientRect(),
+        document: {
+          scrollWidth,
+          scrollHeight,
+        },
+        viewport: {
+          width,
+          height,
+          offsetLeft,
+          offsetTop,
+          pageLeft,
+          pageTop,
+          scale,
+        },
+      })
     }
 
-    function startPageInfoMonitor() {
-      function setListener(type, func) {
-        function sendPageInfo() {
-          if (settings[id]) {
-            sendPageInfoToIframe(settings[id].iframe, id)
-          } else {
-            stop()
-          }
+    const sendInfoToIframe = (type, infoFunction) => (requestType, iframeId) => {
+      const gate = {};
+
+      function throttle(func, frameId) {
+        if (!gate[frameId]) {
+          func();
+          gate[frameId] = requestAnimationFrame(() => {
+            gate[frameId] = null;
+          });
         }
+      }
 
-        ;['scroll', 'resize'].forEach(function (evt) {
-          log(id, type + evt + ' listener for sendPageInfo')
-          func(window, evt, sendPageInfo)
-        })
+      function gatedTrigger() {
+        trigger(
+          `Send ${type} (${requestType})`,
+          `${type}:${infoFunction()}`,
+          iframeId,
+        );
+      }
+
+      throttle(gatedTrigger, iframeId);
+    };
+
+    const startInfoMonitor = (sendInfoToIframe, type) => () => {
+      const sendInfo = (requestType) => () => {
+        if (settings[id]) {
+          sendInfoToIframe(requestType, id);
+        } else {
+          stop();
+        }
+      };
+
+      function setListener(requestType, listener) {
+        listener(window, 'scroll', sendInfo('scroll'));
+        listener(window, 'resize', sendInfo('resize window'));
       }
 
       function stop() {
-        setListener('Remove ', removeEventListener)
+        setListener('Remove ', removeEventListener);
+        pageObserver.disconnect();
+        iframeObserver.disconnect();
       }
 
       function start() {
-        setListener('Add ', addEventListener)
+        setListener('Add ', addEventListener);
+        pageObserver.observe(document.body, {
+          attributes: true,
+          childList: true,
+          subtree: true,
+        });
+        iframeObserver.observe(settings[id].iframe, {
+          attributes: true,
+          childList: false,
+          subtree: false,
+        });
       }
 
-      var id = iframeId // Create locally scoped copy of iFrame ID
+      const id = iframeId; // Create locally scoped copy of iFrame ID
+
+      const pageObserver = new ResizeObserver(sendInfo('page observed'));
+      const iframeObserver = new ResizeObserver(sendInfo('iframe observed'));
 
-      start()
+      start();
 
       if (settings[id]) {
-        settings[id].stopPageInfo = stop
+        settings[id][`stop${type}`] = stop;
       }
-    }
+    };
 
-    function stopPageInfoMonitor() {
-      if (settings[iframeId] && settings[iframeId].stopPageInfo) {
-        settings[iframeId].stopPageInfo()
-        delete settings[iframeId].stopPageInfo
+    const stopInfoMonitor = (stopFunction) => () => {
+      if (stopFunction in settings[iframeId]) {
+        settings[iframeId][stopFunction]();
+        delete settings[iframeId][stopFunction];
       }
-    }
+    };
+
+    const sendPageInfoToIframe = sendInfoToIframe('pageInfo', getPageInfo);
+    const sendParentInfoToIframe = sendInfoToIframe('parentInfo', getParentProps);
+
+    const startPageInfoMonitor = startInfoMonitor(
+      sendPageInfoToIframe,
+      'PageInfo',
+    );
+    const startParentInfoMonitor = startInfoMonitor(
+      sendParentInfoToIframe,
+      'ParentInfo',
+    );
+
+    const stopPageInfoMonitor = stopInfoMonitor('stopPageInfo');
+    const stopParentInfoMonitor = stopInfoMonitor('stopParentInfo');
 
     function checkIFrameExists() {
-      var retBool = true
+      let retBool = true;
 
-      if (null === messageData.iframe) {
-        warn(iframeId, 'IFrame (' + messageData.id + ') not found')
-        retBool = false
+      if (messageData.iframe === null) {
+        warn(iframeId, `The iframe (${messageData.id}) was not found.`);
+        retBool = false;
       }
+
       return retBool
     }
 
     function getElementPosition(target) {
-      var iFramePosition = target.getBoundingClientRect()
+      const iFramePosition = target.getBoundingClientRect();
 
-      getPagePosition(iframeId)
+      getPagePosition();
 
       return {
-        x: Math.floor(Number(iFramePosition.left) + Number(pagePosition.x)),
-        y: Math.floor(Number(iFramePosition.top) + Number(pagePosition.y))
+        x: Number(iFramePosition.left) + Number(page.position.x),
+        y: Number(iFramePosition.top) + Number(page.position.y),
       }
     }
 
+    function scrollBy() {
+      const x = messageData.width;
+      const y = messageData.height;
+
+      const target = window.parentIframe || window;
+
+      target.scrollBy(x, y);
+    }
+
     function scrollRequestFromChild(addOffset) {
       /* istanbul ignore next */ // Not testable in Karma
       function reposition() {
-        pagePosition = newPosition
-        scrollTo()
-        log(iframeId, '--')
-      }
-
-      function calcOffset() {
-        return {
-          x: Number(messageData.width) + offset.x,
-          y: Number(messageData.height) + offset.y
-        }
+        page.position = newPosition;
+        scrollTo(iframeId);
       }
 
       function scrollParent() {
         if (window.parentIFrame) {
-          window.parentIFrame['scrollTo' + (addOffset ? 'Offset' : '')](
+          window.parentIFrame[`scrollTo${addOffset ? 'Offset' : ''}`](
             newPosition.x,
-            newPosition.y
-          )
+            newPosition.y,
+          );
         } else {
           warn(
             iframeId,
-            'Unable to scroll to requested position, window.parentIFrame not found'
-          )
+            'Unable to scroll to requested position, window.parentIFrame not found',
+          );
         }
       }
 
-      var offset = addOffset
-          ? getElementPosition(messageData.iframe)
-          : { x: 0, y: 0 },
-        newPosition = calcOffset()
-
-      log(
-        iframeId,
-        'Reposition requested from iFrame (offset x:' +
-          offset.x +
-          ' y:' +
-          offset.y +
-          ')'
-      )
+      const calcOffset = (messageData, offset) => ({
+        x: messageData.width + offset.x,
+        y: messageData.height + offset.y,
+      });
+
+      const offset = addOffset
+        ? getElementPosition(messageData.iframe)
+        : { x: 0, y: 0 };
+
+      let newPosition = calcOffset(messageData, offset);
 
       if (window.top === window.self) {
-        reposition()
+        reposition();
       } else {
-        scrollParent()
+        scrollParent();
       }
     }
 
-    function scrollTo() {
-      if (false === on('onScroll', pagePosition)) {
-        unsetPagePosition()
-      } else {
-        setPagePosition(iframeId)
+    function scrollTo(iframeId) {
+      const { x, y } = page.position;
+      const iframe = settings[iframeId]?.iframe;
+      if (on('onScroll', { iframe, top: y, left: x, x, y }) === false) {
+        unsetPagePosition();
+        return
       }
+      setPagePosition();
     }
 
     function findTarget(location) {
       function jumpToTarget() {
-        var jumpPosition = getElementPosition(target)
+        const jumpPosition = getElementPosition(target);
 
-        log(
-          iframeId,
-          'Moving to in page link (#' +
-            hash +
-            ') at x: ' +
-            jumpPosition.x +
-            ' y: ' +
-            jumpPosition.y
-        )
-        pagePosition = {
+        page.position = {
           x: jumpPosition.x,
-          y: jumpPosition.y
-        }
+          y: jumpPosition.y,
+        };
 
-        scrollTo()
-        log(iframeId, '--')
+        scrollTo(iframeId);
       }
 
       function jumpToParent() {
         if (window.parentIFrame) {
-          window.parentIFrame.moveToAnchor(hash)
-        } else {
-          log(
-            iframeId,
-            'In page link #' +
-              hash +
-              ' not found and window.parentIFrame not found'
-          )
+          window.parentIFrame.moveToAnchor(hash);
+          return
         }
       }
 
-      var hash = location.split('#')[1] || '',
-        hashData = decodeURIComponent(hash),
-        target =
-          document.getElementById(hashData) ||
-          document.getElementsByName(hashData)[0]
+      const hash = location.split('#')[1] || '';
+      const hashData = decodeURIComponent(hash);
+
+      let target =
+        document.getElementById(hashData) ||
+        document.getElementsByName(hashData)[0];
 
       if (target) {
-        jumpToTarget()
-      } else if (window.top === window.self) {
-        log(iframeId, 'In page link #' + hash + ' not found')
-      } else {
-        jumpToParent()
+        jumpToTarget();
+        return
+      }
+
+      if (window.top === window.self) {
+        return
       }
+
+      jumpToParent();
     }
 
     function onMouse(event) {
-      var mousePos = {}
+      let mousePos = {};
 
-      if (Number(messageData.width) === 0 && Number(messageData.height) === 0) {
-        var data = getMsgBody(9).split(':')
+      if (messageData.width === 0 && messageData.height === 0) {
+        const data = getMsgBody(9).split(':');
         mousePos = {
           x: data[1],
-          y: data[0]
-        }
+          y: data[0],
+        };
       } else {
         mousePos = {
           x: messageData.width,
-          y: messageData.height
-        }
+          y: messageData.height,
+        };
       }
 
       on(event, {
         iframe: messageData.iframe,
         screenX: Number(mousePos.x),
         screenY: Number(mousePos.y),
-        type: messageData.type
-      })
+        type: messageData.type,
+      });
+    }
+
+    const on = (funcName, val) => chkEvent(iframeId, funcName, val);
+
+    function checkSameDomain(id) {
+      try {
+        settings[id].sameDomain =
+          !!settings[id]?.iframe?.contentWindow?.iframeChildListener;
+      } catch (error) {
+        settings[id].sameDomain = false;
+      }
     }
 
-    function on(funcName, val) {
-      return chkEvent(iframeId, funcName, val)
+    function checkVersion(version) {
+      if (version === VERSION) return
+      if (version === undefined) {
+        advise(
+          iframeId,
+          `<rb>Legacy version detected in iframe</>
+
+Detected legacy version of child page script. It is recommended to update the page in the iframe to use <b>@iframe-resizer/child</>.
+
+See <u>https://iframe-resizer.com/setup/#child-page-setup</> for more details.
+`,
+        );
+        return
+      }
+    }
+
+    function setTitle(title, iframeId) {
+      if (!settings[iframeId]?.syncTitle) return
+      settings[iframeId].iframe.title = title;
+    }
+
+    function started() {
+      setup = true;
     }
 
     function actionMsg() {
-      if (settings[iframeId] && settings[iframeId].firstRun) firstRun()
+      if (settings[iframeId]?.firstRun) firstRun();
 
       switch (messageData.type) {
-        case 'close': {
-          closeIFrame(messageData.iframe)
+        case 'close':
+          closeIFrame(messageData.iframe);
           break
-        }
 
-        case 'message': {
-          forwardMsgFromIFrame(getMsgBody(6))
+        case 'message':
+          forwardMsgFromIFrame(getMsgBody(6));
           break
-        }
 
-        case 'mouseenter': {
-          onMouse('onMouseEnter')
+        case 'mouseenter':
+          onMouse('onMouseEnter');
           break
-        }
 
-        case 'mouseleave': {
-          onMouse('onMouseLeave')
+        case 'mouseleave':
+          onMouse('onMouseLeave');
           break
-        }
 
-        case 'autoResize': {
-          settings[iframeId].autoResize = JSON.parse(getMsgBody(9))
+        case 'autoResize':
+          settings[iframeId].autoResize = JSON.parse(getMsgBody(9));
           break
-        }
 
-        case 'scrollTo': {
-          scrollRequestFromChild(false)
+        case 'scrollBy':
+          scrollBy();
           break
-        }
 
-        case 'scrollToOffset': {
-          scrollRequestFromChild(true)
+        case 'scrollTo':
+          scrollRequestFromChild(false);
           break
-        }
 
-        case 'pageInfo': {
-          sendPageInfoToIframe(
-            settings[iframeId] && settings[iframeId].iframe,
-            iframeId
-          )
-          startPageInfoMonitor()
+        case 'scrollToOffset':
+          scrollRequestFromChild(true);
           break
-        }
 
-        case 'pageInfoStop': {
-          stopPageInfoMonitor()
+        case 'pageInfo':
+          sendPageInfoToIframe('start', iframeId);
+          startPageInfoMonitor();
           break
-        }
 
-        case 'inPageLink': {
-          findTarget(getMsgBody(9))
+        case 'parentInfo':
+          sendParentInfoToIframe('start', iframeId);
+          startParentInfoMonitor();
           break
-        }
 
-        case 'reset': {
-          resetIFrame(messageData)
+        case 'pageInfoStop':
+          stopPageInfoMonitor();
           break
-        }
 
-        case 'init': {
-          resizeIFrame()
-          on('onInit', messageData.iframe)
+        case 'parentInfoStop':
+          stopParentInfoMonitor();
           break
-        }
 
-        default: {
-          if (
-            Number(messageData.width) === 0 &&
-            Number(messageData.height) === 0
-          ) {
+        case 'inPageLink':
+          findTarget(getMsgBody(9));
+          break
+
+        case 'title':
+          setTitle(messageData.msg, iframeId);
+          break
+
+        case 'reset':
+          resetIFrame(messageData);
+          break
+
+        case 'init':
+          resizeIFrame();
+          checkSameDomain(iframeId);
+          checkVersion(messageData.msg);
+          started();
+          on('onReady', messageData.iframe);
+          break
+
+        default:
+          if (messageData.width === 0 && messageData.height === 0) {
             warn(
-              'Unsupported message received (' +
-                messageData.type +
-                '), this is likely due to the iframe containing a later ' +
-                'version of iframe-resizer than the parent page'
-            )
-          } else {
-            resizeIFrame()
+              `Unsupported message received (${messageData.type}), this is likely due to the iframe containing a later ` +
+                `version of iframe-resizer than the parent page`,
+            );
+            return
           }
-        }
+
+          if (messageData.width === 0 || messageData.height === 0) {
+            return
+          }
+
+          // Recheck document.hidden here, as only Firefox
+          // correctly supports this in the iframe
+          if (document.hidden) {
+            return
+          }
+
+          resizeIFrame();
       }
     }
 
-    function hasSettings(iframeId) {
-      var retBool = true
-
+    function checkSettings(iframeId) {
       if (!settings[iframeId]) {
-        retBool = false
-        warn(
-          messageData.type +
-            ' No settings for ' +
-            iframeId +
-            '. Message was: ' +
-            msg
+        throw new Error(
+          `${messageData.type} No settings for ${iframeId}. Message was: ${msg}`,
         )
       }
-
-      return retBool
     }
 
     function iFrameReadyMsgReceived() {
-      // eslint-disable-next-line no-restricted-syntax, guard-for-in
-      for (var iframeId in settings) {
-        trigger(
-          'iFrame requested init',
-          createOutgoingMsg(iframeId),
-          settings[iframeId].iframe,
-          iframeId
-        )
-      }
+      Object.keys(settings).forEach((iframeId) => {
+        if (settings[iframeId].mode >= 0)
+          trigger('iFrame requested init', createOutgoingMsg(iframeId), iframeId);
+      });
     }
 
     function firstRun() {
       if (settings[iframeId]) {
-        settings[iframeId].firstRun = false
+        settings[iframeId].firstRun = false;
       }
     }
 
-    var msg = event.data,
-      messageData = {},
-      iframeId = null
+    let msg = event.data;
+    let messageData = {};
+    let iframeId = null;
 
-    if ('[iFrameResizerChild]Ready' === msg) {
-      iFrameReadyMsgReceived()
-    } else if (isMessageForUs()) {
-      messageData = processMsg()
-      iframeId = messageData.id
-      if (settings[iframeId]) {
-        settings[iframeId].loaded = true
-      }
+    if (msg === '[iFrameResizerChild]Ready') {
+      iFrameReadyMsgReceived();
+      return
+    }
 
-      if (!isMessageFromMetaParent() && hasSettings(iframeId)) {
-        log(iframeId, 'Received: ' + msg)
+    if (!isMessageForUs()) {
+      return
+    }
 
-        if (checkIFrameExists() && isMessageFromIFrame()) {
-          actionMsg()
-        }
+    messageData = processMsg();
+    iframeId = messageData.id;
+
+    if (!iframeId) {
+      warn('iframeResizer received messageData without id, message was: ', msg);
+      return
+    }
+
+    checkSettings(iframeId);
+
+    if (!isMessageFromMetaParent()) {
+      settings[iframeId].loaded = true;
+
+      if (checkIFrameExists() && isMessageFromIFrame()) {
+        actionMsg();
       }
-    } else {
-      info(iframeId, 'Ignored: ' + msg)
     }
   }
 
   function chkEvent(iframeId, funcName, val) {
-    var func = null,
-      retVal = null
+    let func = null;
+    let retVal = null;
 
     if (settings[iframeId]) {
-      func = settings[iframeId][funcName]
+      func = settings[iframeId][funcName];
 
-      if ('function' === typeof func) {
-        retVal = func(val)
+      if (typeof func === 'function') {
+        retVal = func(val);
       } else {
         throw new TypeError(
-          funcName + ' on iFrame[' + iframeId + '] is not a function'
+          `${funcName} on iFrame[${iframeId}] is not a function`,
         )
       }
     }
@@ -722,421 +828,262 @@ Please see https://iframe-resizer.com/upgrade for more details.
   }
 
   function removeIframeListeners(iframe) {
-    var iframeId = iframe.id
-    delete settings[iframeId]
+    const iframeId = iframe.id;
+    delete settings[iframeId];
   }
 
   function closeIFrame(iframe) {
-    var iframeId = iframe.id
+    const iframeId = iframe.id;
     if (chkEvent(iframeId, 'onClose', iframeId) === false) {
-      log(iframeId, 'Close iframe cancelled by onClose event')
       return
     }
-    log(iframeId, 'Removing iFrame: ' + iframeId)
 
     try {
       // Catch race condition error with React
       if (iframe.parentNode) {
-        iframe.parentNode.removeChild(iframe)
+        iframe.remove();
       }
     } catch (error) {
-      warn(error)
+      warn(error);
     }
 
-    chkEvent(iframeId, 'onClosed', iframeId)
-    log(iframeId, '--')
-    removeIframeListeners(iframe)
-    if (destroyObserver) {
-      destroyObserver.disconnect()
-      destroyObserver = null
-    }
+    chkEvent(iframeId, 'onClosed', iframeId);
+    removeIframeListeners(iframe);
   }
 
   function getPagePosition(iframeId) {
-    if (null === pagePosition) {
-      pagePosition = {
-        x:
-          window.pageXOffset === undefined
-            ? document.documentElement.scrollLeft
-            : window.pageXOffset,
-        y:
-          window.pageYOffset === undefined
-            ? document.documentElement.scrollTop
-            : window.pageYOffset
-      }
-      log(
-        iframeId,
-        'Get page position: ' + pagePosition.x + ',' + pagePosition.y
-      )
+    if (page.position === null) {
+      page.position = {
+        x: window.scrollX,
+        y: window.scrollY,
+      };
     }
   }
 
-  function setPagePosition(iframeId) {
-    if (null !== pagePosition) {
-      window.scrollTo(pagePosition.x, pagePosition.y)
-      log(
-        iframeId,
-        'Set page position: ' + pagePosition.x + ',' + pagePosition.y
-      )
-      unsetPagePosition()
-    }
+  function unsetPagePosition() {
+    page.position = null;
   }
 
-  function unsetPagePosition() {
-    pagePosition = null
+  function setPagePosition(iframeId) {
+    if (page.position !== null) {
+      window.scrollTo(page.position.x, page.position.y);
+      unsetPagePosition();
+    }
   }
 
   function resetIFrame(messageData) {
-    function reset() {
-      setSize(messageData)
-      trigger('reset', 'reset', messageData.iframe, messageData.id)
-    }
-
-    log(
-      messageData.id,
-      'Size reset requested by ' +
-        ('init' === messageData.type ? 'host page' : 'iFrame')
-    )
-    getPagePosition(messageData.id)
-    syncResize(reset, messageData, 'reset')
+
+    getPagePosition(messageData.id);
+    setSize(messageData);
+    trigger('reset', 'reset', messageData.id);
   }
 
   function setSize(messageData) {
-    function setDimension(dimension) {
-      if (!messageData.id) {
-        log('undefined', 'messageData id not set')
-        return
-      }
-      messageData.iframe.style[dimension] = messageData[dimension] + 'px'
-      log(
-        messageData.id,
-        'IFrame (' +
-          iframeId +
-          ') ' +
-          dimension +
-          ' set to ' +
-          messageData[dimension] +
-          'px'
-      )
-    }
-
-    function chkZero(dimension) {
-      // FireFox sets dimension of hidden iFrames to zero.
-      // So if we detect that set up an event to check for
-      // when iFrame becomes visible.
-
-      /* istanbul ignore next */ // Not testable in PhantomJS
-      if (!hiddenCheckEnabled && '0' === messageData[dimension]) {
-        hiddenCheckEnabled = true
-        log(iframeId, 'Hidden iFrame detected, creating visibility listener')
-        fixHiddenIFrames()
-      }
-    }
+    const iframeId = messageData.id;
 
-    function processDimension(dimension) {
-      setDimension(dimension)
-      chkZero(dimension)
+    function setDimension(dimension) {
+      const size = `${messageData[dimension]}px`;
+      messageData.iframe.style[dimension] = size;
     }
 
-    var iframeId = messageData.iframe.id
-
-    if (settings[iframeId]) {
-      if (settings[iframeId].sizeHeight) {
-        processDimension('height')
-      }
-      if (settings[iframeId].sizeWidth) {
-        processDimension('width')
-      }
+    if (settings[iframeId].sizeHeight) {
+      setDimension('height');
     }
-  }
-
-  function syncResize(func, messageData, doNotSync) {
-    /* istanbul ignore if */ // Not testable in PhantomJS
-    if (
-      doNotSync !== messageData.type &&
-      requestAnimationFrame &&
-      // including check for jasmine because had trouble getting spy to work in unit test using requestAnimationFrame
-      !window.jasmine
-    ) {
-      log(messageData.id, 'Requesting animation frame')
-      requestAnimationFrame(func)
-    } else {
-      func()
+    if (settings[iframeId].sizeWidth) {
+      setDimension('width');
     }
   }
 
-  function trigger(calleeMsg, msg, iframe, id, noResponseWarning) {
+  function trigger(calleeMsg, msg, id, noResponseWarning) {
     function postMessageToIFrame() {
-      var target = settings[id] && settings[id].targetOrigin
-      log(
-        id,
-        '[' +
-          calleeMsg +
-          '] Sending msg to iframe[' +
-          id +
-          '] (' +
-          msg +
-          ') targetOrigin: ' +
-          target
-      )
-      iframe.contentWindow.postMessage(msgId + msg, target)
+      const { postMessageTarget, targetOrigin } = settings[id];
+
+      if (settings[id].sameDomain) {
+        try {
+          settings[id].iframe.contentWindow.iframeChildListener(msgId + msg);
+          return
+        } catch (error) {
+        }
+      }
+      postMessageTarget.postMessage(msgId + msg, targetOrigin);
     }
 
     function iFrameNotFound() {
-      warn(id, '[' + calleeMsg + '] IFrame(' + id + ') not found')
+      warn(id, `[${calleeMsg}] IFrame(${id}) not found`);
     }
 
     function chkAndSend() {
-      if (
-        iframe &&
-        'contentWindow' in iframe &&
-        null !== iframe.contentWindow
-      ) {
-        // Null test for PhantomJS
-        postMessageToIFrame()
-      } else {
-        iFrameNotFound()
+      if (!settings[id]?.postMessageTarget) {
+        iFrameNotFound();
+        return
       }
+      postMessageToIFrame();
     }
 
     function warnOnNoResponse() {
       function warning() {
-        if (settings[id] && !settings[id].loaded && !errorShown) {
-          errorShown = true
-          warn(
+        if (settings[id] === undefined) return // iframe has been closed while we where waiting
+
+        if (!settings[id].loaded && !settings[id].loadErrorShown) {
+          settings[id].loadErrorShown = true;
+          advise(
             id,
-            'IFrame has not responded within ' +
-              settings[id].warningTimeout / 1000 +
-              ' seconds. Check iFrameResizer.contentWindow.js has been loaded in iFrame. This message can be ignored if everything is working, or you can set the warningTimeout option to a higher value or zero to suppress this warning.'
-          )
+            `
+<rb>No response from iFrame</>
+            
+The iframe (<i>${id}</>) has not responded within ${settings[id].warningTimeout / 1000} seconds. Check <b>@iframe-resizer/child</> package has been loaded in the iframe.
+
+This message can be ignored if everything is working, or you can set the <b>warningTimeout</> option to a higher value or zero to suppress this warning.
+`,
+          );
         }
       }
 
-      if (
-        !!noResponseWarning &&
-        settings[id] &&
-        !!settings[id].warningTimeout
-      ) {
-        settings[id].msgTimeout = setTimeout(
-          warning,
-          settings[id].warningTimeout
-        )
+      if (!!noResponseWarning && !!settings[id]?.warningTimeout) {
+        settings[id].msgTimeout = setTimeout(warning, settings[id].warningTimeout);
       }
     }
 
-    var errorShown = false
-
-    id = id || iframe.id
-
     if (settings[id]) {
-      chkAndSend()
-      warnOnNoResponse()
+      chkAndSend();
+      warnOnNoResponse();
     }
   }
 
   function createOutgoingMsg(iframeId) {
-    return (
-      iframeId +
-      ':' +
-      settings[iframeId].bodyMarginV1 +
-      ':' +
-      settings[iframeId].sizeWidth +
-      ':' +
-      settings[iframeId].log +
-      ':' +
-      settings[iframeId].interval +
-      ':' +
-      settings[iframeId].enablePublicMethods +
-      ':' +
-      settings[iframeId].autoResize +
-      ':' +
-      settings[iframeId].bodyMargin +
-      ':' +
-      settings[iframeId].heightCalculationMethod +
-      ':' +
-      settings[iframeId].bodyBackground +
-      ':' +
-      settings[iframeId].bodyPadding +
-      ':' +
-      settings[iframeId].tolerance +
-      ':' +
-      settings[iframeId].inPageLinks +
-      ':' +
-      settings[iframeId].resizeFrom +
-      ':' +
-      settings[iframeId].widthCalculationMethod +
-      ':' +
-      settings[iframeId].mouseEvents
-    )
+    const iframeSettings = settings[iframeId];
+
+    return [
+      iframeId,
+      '8', // Backwards compatibility (PaddingV1)
+      iframeSettings.sizeWidth,
+      iframeSettings.log,
+      '32', // Backwards compatibility (Interval)
+      true, // Backwards compatibility (EnablePublicMethods)
+      iframeSettings.autoResize,
+      iframeSettings.bodyMargin,
+      iframeSettings.heightCalculationMethod,
+      iframeSettings.bodyBackground,
+      iframeSettings.bodyPadding,
+      iframeSettings.tolerance,
+      iframeSettings.inPageLinks,
+      'child', // Backwards compatibility (resizeFrom)
+      iframeSettings.widthCalculationMethod,
+      iframeSettings.mouseEvents,
+      iframeSettings.offsetHeight,
+      iframeSettings.offsetWidth,
+      iframeSettings.sizeHeight,
+      iframeSettings.license,
+      page.version,
+      iframeSettings.mode,
+      // iframeSettings.sizeSelector,
+    ].join(':')
   }
 
-  function isNumber(value) {
-    return typeof value === 'number'
-  }
+  let count = 0;
+  let setup = false;
+  let vAdvised = false;
 
-  function setupIFrame(iframe, options) {
-    function setLimits() {
-      function addStyle(style) {
-        var styleValue = settings[iframeId][style]
-        if (Infinity !== styleValue && 0 !== styleValue) {
-          iframe.style[style] = isNumber(styleValue)
-            ? styleValue + 'px'
-            : styleValue
-          log(iframeId, 'Set ' + style + ' = ' + iframe.style[style])
-        }
-      }
+  const connectResizer = (options) => (iframe) => {
+    function newId() {
+      let id = options?.id || defaults.id + count++;
 
-      function chkMinMax(dimension) {
-        if (
-          settings[iframeId]['min' + dimension] >
-          settings[iframeId]['max' + dimension]
-        ) {
-          throw new Error(
-            'Value for min' +
-              dimension +
-              ' can not be greater than max' +
-              dimension
-          )
-        }
+      if (document.getElementById(id) !== null) {
+        id += count++;
       }
 
-      chkMinMax('Height')
-      chkMinMax('Width')
-
-      addStyle('maxHeight')
-      addStyle('minHeight')
-      addStyle('maxWidth')
-      addStyle('minWidth')
-    }
-
-    function newId() {
-      var id = (options && options.id) || defaults.id + count++
-      if (null !== document.getElementById(id)) {
-        id += count++
-      }
       return id
     }
 
     function ensureHasId(iframeId) {
-      if (typeof iframeId !== 'string') {
-        throw new TypeError('Invaild id for iFrame. Expected String')
+      if (iframeId && typeof iframeId !== 'string') {
+        throw new TypeError('Invalid id for iFrame. Expected String')
       }
 
-      if ('' === iframeId) {
+      if (iframeId === '' || !iframeId) {
         // eslint-disable-next-line no-multi-assign
-        iframe.id = iframeId = newId()
-        logEnabled = (options || {}).log
-        log(
-          iframeId,
-          'Added missing iframe ID: ' + iframeId + ' (' + iframe.src + ')'
-        )
+        iframe.id = iframeId = newId();
+        setLogEnabled((options || {}).log);
       }
 
       return iframeId
     }
 
     function setScrolling() {
-      log(
-        iframeId,
-        'IFrame scrolling ' +
-          (settings[iframeId] && settings[iframeId].scrolling
-            ? 'enabled'
-            : 'disabled') +
-          ' for ' +
-          iframeId
-      )
+
       iframe.style.overflow =
-        false === (settings[iframeId] && settings[iframeId].scrolling)
-          ? 'hidden'
-          : 'auto'
-      switch (settings[iframeId] && settings[iframeId].scrolling) {
-        case 'omit': {
+        settings[iframeId]?.scrolling === false ? 'hidden' : 'auto';
+
+      switch (settings[iframeId]?.scrolling) {
+        case 'omit':
           break
-        }
 
-        case true: {
-          iframe.scrolling = 'yes'
+        case true:
+          iframe.scrolling = 'yes';
           break
-        }
 
-        case false: {
-          iframe.scrolling = 'no'
+        case false:
+          iframe.scrolling = 'no';
           break
-        }
 
-        default: {
+        default:
           iframe.scrolling = settings[iframeId]
             ? settings[iframeId].scrolling
-            : 'no'
-        }
+            : 'no';
       }
     }
 
-    // The V1 iFrame script expects an int, where as in V2 expects a CSS
-    // string value such as '1px 3em', so if we have an int for V2, set V1=V2
-    // and then convert V2 to a string PX value.
     function setupBodyMarginValues() {
-      if (
-        'number' ===
-          typeof (settings[iframeId] && settings[iframeId].bodyMargin) ||
-        '0' === (settings[iframeId] && settings[iframeId].bodyMargin)
-      ) {
-        settings[iframeId].bodyMarginV1 = settings[iframeId].bodyMargin
-        settings[iframeId].bodyMargin =
-          '' + settings[iframeId].bodyMargin + 'px'
+      const { bodyMargin } = settings[iframeId];
+
+      if (typeof bodyMargin === 'number' || bodyMargin === '0') {
+        settings[iframeId].bodyMargin = `${bodyMargin}px`;
       }
     }
 
     function checkReset() {
-      // Reduce scope of firstRun to function, because IE8's JS execution
-      // context stack is borked and this value gets externally
-      // changed midway through running this function!!!
-      var firstRun = settings[iframeId] && settings[iframeId].firstRun,
-        resetRequertMethod =
-          settings[iframeId] &&
-          settings[iframeId].heightCalculationMethod in resetRequiredMethods
-
-      if (!firstRun && resetRequertMethod) {
-        resetIFrame({ iframe: iframe, height: 0, width: 0, type: 'init' })
+      const firstRun = settings[iframeId]?.firstRun;
+      const resetRequestMethod =
+        settings[iframeId]?.heightCalculationMethod in resetRequiredMethods;
+
+      if (!firstRun && resetRequestMethod) {
+        resetIFrame({ iframe, height: 0, width: 0, type: 'init' });
       }
     }
 
     function setupIFrameObject() {
       if (settings[iframeId]) {
-        settings[iframeId].iframe.iFrameResizer = {
+        const resizer = {
           close: closeIFrame.bind(null, settings[iframeId].iframe),
 
-          removeListeners: removeIframeListeners.bind(
-            null,
-            settings[iframeId].iframe
-          ),
-
-          resize: trigger.bind(
-            null,
-            'Window resize',
-            'resize',
-            settings[iframeId].iframe
-          ),
-
-          moveToAnchor: function (anchor) {
-            trigger(
-              'Move to anchor',
-              'moveToAnchor:' + anchor,
-              settings[iframeId].iframe,
-              iframeId
-            )
+          disconnect: removeIframeListeners.bind(null, settings[iframeId].iframe),
+
+          removeListeners() {
+            advise(
+              iframeId,
+              `
+<rb>Deprecated Method Name</>
+
+The \u001B[removeListeners()</> method has been renamed to \u001B[disconnect()</>.
+`,
+            );
+            this.disconnect();
           },
 
-          sendMessage: function (message) {
-            message = JSON.stringify(message)
-            trigger(
-              'Send Message',
-              'message:' + message,
-              settings[iframeId].iframe,
-              iframeId
-            )
-          }
-        }
+          resize: trigger.bind(null, 'Window resize', 'resize', iframeId),
+
+          moveToAnchor(anchor) {
+            trigger('Move to anchor', `moveToAnchor:${anchor}`, iframeId);
+          },
+
+          sendMessage(message) {
+            message = JSON.stringify(message);
+            trigger('Send Message', `message:${message}`, iframeId);
+          },
+        };
+
+        settings[iframeId].iframe.iframeResizer = resizer;
+        settings[iframeId].iframe.iFrameResizer = resizer;
       }
     }
 
@@ -1145,344 +1092,229 @@ Please see https://iframe-resizer.com/upgrade for more details.
     // event listener also catches the page changing in the iFrame.
     function init(msg) {
       function iFrameLoaded() {
-        trigger('iFrame.onload', msg, iframe, undefined, true)
-        checkReset()
+        trigger('iFrame.onload', `${msg}:${setup}`, id, true);
+        checkReset();
       }
 
-      function createDestroyObserver(MutationObserver) {
-        if (!iframe.parentNode) {
-          return null
-        }
+      const { id } = iframe;
 
-        var destroyObserver = new MutationObserver(function (mutations) {
-          mutations.forEach(function (mutation) {
-            var removedNodes = Array.prototype.slice.call(mutation.removedNodes) // Transform NodeList into an Array
-            removedNodes.forEach(function (removedNode) {
-              if (removedNode === iframe) {
-                closeIFrame(iframe)
-              }
-            })
-          })
-        })
-        destroyObserver.observe(iframe.parentNode, {
-          childList: true
-        })
-        return destroyObserver
-      }
+      if (settings[id].mode === -1) return // modal()
+      if (settings[id].mode === -2) return
 
-      var MutationObserver = getMutationObserver()
-      if (MutationObserver) {
-        destroyObserver = createDestroyObserver(MutationObserver)
-      }
-
-      addEventListener(iframe, 'load', iFrameLoaded)
-      trigger('init', msg, iframe, undefined, true)
+      addEventListener(iframe, 'load', iFrameLoaded);
+      if (settings[id].waitForLoad === false)
+        trigger('init', `${msg}:${setup}`, id, true);
     }
 
     function checkOptions(options) {
-      if ('object' !== typeof options) {
+      if (!options) return {}
+
+      if (typeof options !== 'object') {
         throw new TypeError('Options is not an object')
       }
-    }
 
-    function copyOptions(options) {
-      // eslint-disable-next-line no-restricted-syntax
-      for (var option in defaults) {
-        if (Object.prototype.hasOwnProperty.call(defaults, option)) {
-          settings[iframeId][option] = Object.prototype.hasOwnProperty.call(
-            options,
-            option
-          )
-            ? options[option]
-            : defaults[option]
-        }
+      if (
+        'sizeWidth' in options ||
+        'sizeHeight' in options ||
+        'autoResize' in options
+      ) {
+        advise(
+          iframeId,
+          `<rb>Deprecated Option</>
+
+The <b>sizeWidth</>, <b>sizeHeight</> and <b>autoResize</> options have been replaced with new <b>direction</> option which expects values of <i>"vertical"</>, <i>"horizontal"</> or <i>"horizontal"</>.
+`,
+        );
       }
+
+      return options
     }
 
-    function getTargetOrigin(remoteHost) {
-      return '' === remoteHost ||
-        null !== remoteHost.match(/^(about:blank|javascript:|file:\/\/)/)
-        ? '*'
-        : remoteHost
+    function checkMode() {
+      const { mode } = settings[iframeId];
+      if (mode < 0) advise('Parent', `${getModeData(mode + 2)}${getModeData(2)}`);
+      if (vAdvised || mode < 0) return
+      vAdvised = true;
+      info(`v${VERSION} (${getModeLabel(mode)})`);
+      if (mode < 1) advise('Parent', getModeData(3));
     }
 
-    function depricate(key) {
-      var splitName = key.split('Callback')
+    function setDirection() {
+      if (settings[iframeId].direction === 'horizontal') {
+        settings[iframeId].sizeWidth = true;
+        settings[iframeId].sizeHeight = false;
+        return
+      }
+
+      if (settings[iframeId].direction === 'none') {
+        settings[iframeId].sizeWidth = false;
+        settings[iframeId].sizeHeight = false;
+        settings[iframeId].autoResize = false;
+        return
+      }
 
-      if (splitName.length === 2) {
-        var name =
-          'on' + splitName[0].charAt(0).toUpperCase() + splitName[0].slice(1)
-        this[name] = this[key]
-        delete this[key]
-        warn(
+      if (settings[iframeId].direction !== 'vertical') {
+        throw new TypeError(
           iframeId,
-          "Deprecated: '" +
-            key +
-            "' has been renamed '" +
-            name +
-            "'. The old method will be removed in the next major version."
+          `Direction value of "${settings[iframeId].direction}" is not valid`,
         )
       }
     }
 
-    function processOptions(options) {
-      options = options || {}
-
-      settings[iframeId] = Object.create(null) // Protect against prototype attacks
-      settings[iframeId].iframe = iframe
-      settings[iframeId].firstRun = true
-      settings[iframeId].remoteHost =
-        iframe.src && iframe.src.split('/').slice(0, 3).join('/')
-
-      checkOptions(options)
-      Object.keys(options).forEach(depricate, options)
-      copyOptions(options)
-
-      if (settings[iframeId]) {
-        settings[iframeId].targetOrigin =
-          true === settings[iframeId].checkOrigin
-            ? getTargetOrigin(settings[iframeId].remoteHost)
-            : '*'
+    function setOffset(offset) {
+      if (!offset) return
+      if (settings[iframeId].direction === 'vertical') {
+        settings[iframeId].offsetHeight = offset;
+      } else {
+        settings[iframeId].offsetWidth = offset;
       }
     }
 
-    function beenHere() {
-      return iframeId in settings && 'iFrameResizer' in iframe
-    }
-
-    var iframeId = ensureHasId(iframe.id)
-
-    if (beenHere()) {
-      warn(iframeId, 'Ignored iFrame, already setup.')
-    } else {
-      processOptions(options)
-      setScrolling()
-      setLimits()
-      setupBodyMarginValues()
-      init(createOutgoingMsg(iframeId))
-      setupIFrameObject()
+    function getTargetOrigin(remoteHost) {
+      return remoteHost === '' ||
+        remoteHost.match(/^(about:blank|javascript:|file:\/\/)/) !== null
+        ? '*'
+        : remoteHost
     }
-  }
 
-  function debouce(fn, time) {
-    if (null === timer) {
-      timer = setTimeout(function () {
-        timer = null
-        fn()
-      }, time)
+    function getPostMessageTarget() {
+      if (settings[iframeId].postMessageTarget === null)
+        settings[iframeId].postMessageTarget = iframe.contentWindow;
     }
-  }
 
-  var frameTimer = {}
-  function debounceFrameEvents(fn, time, frameId) {
-    if (!frameTimer[frameId]) {
-      frameTimer[frameId] = setTimeout(function () {
-        frameTimer[frameId] = null
-        fn()
-      }, time)
+    function chkTitle(iframeId) {
+      const title = settings[iframeId]?.iframe?.title;
+      return title === '' || title === undefined
     }
-  }
 
-  // Not testable in PhantomJS
-  /* istanbul ignore next */
-
-  function fixHiddenIFrames() {
-    function checkIFrames() {
-      function checkIFrame(settingId) {
-        function chkDimension(dimension) {
-          return (
-            '0px' ===
-            (settings[settingId] && settings[settingId].iframe.style[dimension])
-          )
-        }
-
-        function isVisible(el) {
-          return null !== el.offsetParent
-        }
-
-        if (
-          settings[settingId] &&
-          isVisible(settings[settingId].iframe) &&
-          (chkDimension('height') || chkDimension('width'))
-        ) {
-          trigger(
-            'Visibility change',
-            'resize',
-            settings[settingId].iframe,
-            settingId
-          )
-        }
-      }
-
-      Object.keys(settings).forEach(function (key) {
-        checkIFrame(key)
-      })
+    function processOptions(options) {
+      settings[iframeId] = {
+        iframe,
+        firstRun: true,
+        remoteHost: iframe?.src.split('/').slice(0, 3).join('/'),
+        ...defaults,
+        ...checkOptions(options),
+        mode: setMode(options),
+        syncTitle: chkTitle(iframeId),
+      };
+
+      setDirection();
+      setOffset(options?.offset);
+      getPostMessageTarget();
+
+      settings[iframeId].targetOrigin =
+        settings[iframeId].checkOrigin === true
+          ? getTargetOrigin(settings[iframeId].remoteHost)
+          : '*';
     }
 
-    function mutationObserved(mutations) {
-      log(
-        'window',
-        'Mutation observed: ' + mutations[0].target + ' ' + mutations[0].type
-      )
-      debouce(checkIFrames, 16)
+    function beenHere() {
+      return iframeId in settings && 'iFrameResizer' in iframe
     }
 
-    function createMutationObserver() {
-      var target = document.querySelector('body'),
-        config = {
-          attributes: true,
-          attributeOldValue: false,
-          characterData: true,
-          characterDataOldValue: false,
-          childList: true,
-          subtree: true
-        },
-        observer = new MutationObserver(mutationObserved)
+    const iframeId = ensureHasId(iframe.id);
 
-      observer.observe(target, config)
+    if (beenHere()) {
+      warn(iframeId, 'Ignored iFrame, already setup.');
+    } else {
+      processOptions(options);
+      checkMode();
+      setupEventListenersOnce();
+      setScrolling();
+      setupBodyMarginValues();
+      init(createOutgoingMsg(iframeId));
+      setupIFrameObject();
     }
 
-    var MutationObserver = getMutationObserver()
-    if (MutationObserver) {
-      createMutationObserver()
-    }
-  }
+    return iframe?.iFrameResizer
+  };
 
-  function resizeIFrames(event) {
-    function resize() {
-      sendTriggerMsg('Window ' + event, 'resize')
+  function sendTriggerMsg(eventName, event) {
+    function triggerEnabledIframe(iframeId) {
+      if (isIFrameResizeEnabled(iframeId)) {
+        trigger(eventName, event, iframeId);
+      }
     }
 
-    log('window', 'Trigger event: ' + event)
-    debouce(resize, 16)
-  }
+    const isIFrameResizeEnabled = (iframeId) =>
+      settings[iframeId]?.autoResize && !settings[iframeId]?.firstRun;
 
-  // Not testable in PhantomJS
-  /* istanbul ignore next */
-  function tabVisible() {
-    function resize() {
-      sendTriggerMsg('Tab Visible', 'resize')
-    }
-
-    if ('hidden' !== document.visibilityState) {
-      log('document', 'Trigger event: Visibility change')
-      debouce(resize, 16)
-    }
+    Object.keys(settings).forEach(triggerEnabledIframe);
   }
 
-  function sendTriggerMsg(eventName, event) {
-    function isIFrameResizeEnabled(iframeId) {
-      return (
-        settings[iframeId] &&
-        'parent' === settings[iframeId].resizeFrom &&
-        settings[iframeId].autoResize &&
-        !settings[iframeId].firstRun
-      )
+  function tabVisible() {
+    if (document.hidden === false) {
+      sendTriggerMsg('Tab Visible', 'resize');
     }
-
-    Object.keys(settings).forEach(function (iframeId) {
-      if (isIFrameResizeEnabled(iframeId)) {
-        trigger(eventName, event, settings[iframeId].iframe, iframeId)
-      }
-    })
   }
 
-  function setupEventListeners() {
-    addEventListener(window, 'message', iFrameListener)
+  const setupEventListenersOnce = once(() => {
+    addEventListener(window, 'message', iframeListener);
+    addEventListener(document, 'visibilitychange', tabVisible);
+    window.iframeParentListener = (data) =>
+      iframeListener({ data, sameDomain: true });
+  });
 
-    addEventListener(window, 'resize', function () {
-      resizeIFrames('resize')
-    })
+  const id = '[iframeResizer] ';
 
-    addEventListener(document, 'visibilitychange', tabVisible)
+  function createIframeResize() {
+    function setup(element) {
+      switch (true) {
+        case !element:
+          throw new TypeError(`${id}iframe is not defined`)
 
-    addEventListener(document, '-webkit-visibilitychange', tabVisible)
-  }
+        case !element.tagName:
+          throw new TypeError(`${id}Not a valid DOM element`)
 
-  function factory() {
-    function init(options, element) {
-      function chkType() {
-        if (!element.tagName) {
-          throw new TypeError('Object is not a valid DOM element')
-        } else if ('IFRAME' !== element.tagName.toUpperCase()) {
+        case element.tagName.toUpperCase() !== 'IFRAME':
           throw new TypeError(
-            'Expected <IFRAME> tag, found <' + element.tagName + '>'
+            `${id}Expected <IFRAME> tag, found <${element.tagName}>`,
           )
-        }
-      }
 
-      if (element) {
-        chkType()
-        setupIFrame(element, options)
-        iFrames.push(element)
-      }
-    }
-
-    function warnDeprecatedOptions(options) {
-      if (options && options.enablePublicMethods) {
-        warn(
-          'enablePublicMethods option has been removed, public methods are now always available in the iFrame'
-        )
+        default:
+          connectWithOptions(element);
+          iFrames.push(element);
       }
     }
 
-    var iFrames
+    let connectWithOptions;
+    let iFrames;
 
-    setupRequestAnimationFrame()
-    setupEventListeners()
+    return function (options, target) {
+      if (typeof window === 'undefined') return [] // don't run for server side render
 
-    return function iFrameResizeF(options, target) {
-      iFrames = [] // Only return iFrames past in on this call
-
-      warnDeprecatedOptions(options)
+      connectWithOptions = connectResizer(options);
+      iFrames = []; // Only return iFrames passed in on this call
 
       switch (typeof target) {
         case 'undefined':
-        case 'string': {
-          Array.prototype.forEach.call(
-            document.querySelectorAll(target || 'iframe'),
-            init.bind(undefined, options)
-          )
+        case 'string':
+          document.querySelectorAll(target || 'iframe').forEach(setup);
           break
-        }
 
-        case 'object': {
-          init(options, target)
+        case 'object':
+          setup(target);
           break
-        }
 
-        default: {
-          throw new TypeError('Unexpected data type (' + typeof target + ')')
-        }
+        default:
+          throw new TypeError(`${id}Unexpected data type (${typeof target})`)
       }
 
-      return iFrames
+      return Object.freeze(iFrames)
     }
   }
 
-  function createJQueryPublicMethod($) {
-    if (!$.fn) {
-      info('', 'Unable to bind to jQuery, it is not fully loaded.')
-    } else if (!$.fn.iFrameResize) {
-      $.fn.iFrameResize = function $iFrameResizeF(options) {
-        function init(index, element) {
-          setupIFrame(element, options)
-        }
+  const iframeResize = createIframeResize();
 
-        return this.filter('iframe').each(init).end()
-      }
-    }
+  if (typeof window !== 'undefined') {
+    window.iFrameResize =
+      window.iFrameResize ||
+      function (...args) {
+        advise('', 'Deprecated: iFrameResize(), please use iframeResize()');
+        iframeResize(...args);
+      };
   }
 
-  if (window.jQuery !== undefined) {
-    createJQueryPublicMethod(window.jQuery)
-  }
+  return iframeResize;
 
-  if (typeof define === 'function' && define.amd) {
-    define([], factory)
-  } else if (typeof module === 'object' && typeof module.exports === 'object') {
-    // Node for browserfy
-    module.exports = factory()
-  }
-  window.iFrameResize = window.iFrameResize || factory()
-})()
+}));