Added: Only check overflowed elements

example/child/frame.animate.html

@@ -85,6 +85,8 @@
     <h4>Data returned by parentIFrame.getParentProps()</h4>
     <table id="data"></table>
 
+    <span id="insert"></span>
+
     <!-- 
       The data-iframe-size attribute tells iframe-resizer to use this element
       to calculate the height of the iframe, when the content overflows the
@@ -99,10 +101,11 @@ <h4>Data returned by parentIFrame.getParentProps()</h4>
 
     <script>
       // Add some content to to show the effect of using data-iframe-size above
-      for (let i = 0; i < 10_000; i++) {
-        document.write(
-          '<div style="position: absolute">This is a test to see if the page will grow to accommodate the content.</div>',
-  );
+      for (let i = 0; i < 500; i++) {
+        const span = document.createElement('span')
+        span.style.setProperty('position', 'relative')
+        span.textContent = `. `
+        document.getElementById('insert').append(span);
       }
 
     </script>

example/child/frame.content.html

@@ -8,7 +8,6 @@
     <script
       type="text/javascript"
       src="../../js/iframe-resizer.child.js"
-      defer
     ></script>
     <script>
       function toggle() {

example/html/width.html

@@ -22,7 +22,7 @@
     <h2>Automagically resizing iFrame</h2>
     <p>
       Back to
-      <a name="anchorParentTest" href="index.html">horizontal iFrames</a>.
+      <a name="anchorParentTest" href="index.html">vertical iframes</a>.
     </p>
     <div id="iframeContainer" style="margin: 20px">
       <iframe

packages/child/index.js

@@ -2,6 +2,11 @@
 import formatAdvise from '../common/format-advise'
 import { addEventListener, removeEventListener } from '../common/listeners'
 import { getModeData } from '../common/mode'
+import {
+  getOverflowedElements,
+  isOverflowed,
+  overflowObserver,
+} from './overflow'
 
 const PERF_TIME_LIMIT = 4
 const PERF_MIN_ELEMENTS = 99
@@ -74,6 +79,7 @@
 let myID = ''
 let offsetHeight
 let offsetWidth
+let observeOverflow = () => null
 let resizeFrom = 'child'
 let resizeObserver = null
 let sameDomain = false
@@ -172,6 +178,7 @@
   setupCalcElements()
   setupPublicMethods()
   setupMouseEvents()
+  setupObserveOverflow()
   startEventListeners()
   inPageLinks = setupInPageLinks()
   addUsedTag(document.documentElement)
@@ -182,6 +189,13 @@
   isInit = false
 }
 
+function setupObserveOverflow() {
+  if (calculateHeight === calculateWidth) return
+  observeOverflow = overflowObserver({
+    side: calculateHeight ? 'bottom' : 'right',
+  })
+}
+
 function sendTitle() {
   if (document.title && document.title !== '') {
     sendMsg(0, 0, 'title', document.title)
@@ -404,7 +418,7 @@
     document.querySelectorAll(`[${attr}]`).forEach((el) => {
       found = true
       el.removeAttribute(attr)
-      el.setAttribute(SIZE_ATTR, null)
+      el.setAttribute(SIZE_ATTR, true)
     })
 
   checkAttrs('data-iframe-height')
@@ -440,6 +454,7 @@
   const taggedElements = document.querySelectorAll(`[${SIZE_ATTR}]`)
   hasTags = taggedElements.length > 0
   calcElements = hasTags ? taggedElements : getAllElements(document)()
+  if (!hasTags) observeOverflow(calcElements)
 }
 
 function checkCalcMode(calcMode, calcModeDefault, modes, type) {
@@ -784,9 +799,13 @@
 const getAllNonStaticElements = () =>
   [...getAllElements(document)()].filter(checkPositionType)
 
+const resizeSet = new WeakSet()
+
 function setupResizeObservers(el) {
   if (!el) return
+  if (resizeSet.has(el)) return
   resizeObserver.observe(el)
+  resizeSet.add(el)
   log(`Attached resizeObserver: ${getElementName(el)}`)
 }
 
@@ -870,20 +889,23 @@
   const Side = capitalizeFirstLetter(side)
 
   let elVal = 0
-  let len = calcElements.length
   let maxEl = document.documentElement
   let maxVal = hasTags
     ? 0
     : document.documentElement.getBoundingClientRect().bottom
   let timer = performance.now()
 
-  calcElements.forEach((element) => {
+  const targetElements =
+    !hasTags && isOverflowed() ? getOverflowedElements() : calcElements
+
+  let len = targetElements.length
+
+  targetElements.forEach((element) => {
     if (
       !hasTags &&
-      hasCheckVisibility &&
+      hasCheckVisibility && // Safari missing checkVisibility
       !element.checkVisibility(checkVisibilityOptions)
     ) {
-      log(`Skipping non-visible element: ${getElementName(element)}`)
       len -= 1
       return
     }

packages/child/overflow.js

@@ -0,0 +1,44 @@
+const OVERFLOW = 'data-iframe-overflow'
+let side = 'bottom'
+
+const options = {
+  root: document.documentElement,
+  rootMargin: '0px',
+  threshold: 1,
+}
+
+let overflowedElements = []
+const observedElements = new WeakSet()
+
+const callback = (entries) => {
+  entries.forEach((entry) => {
+    if (
+      entry.boundingClientRect[side] === 0 ||
+      entry.boundingClientRect[side] >= entry.rootBounds[side]
+    ) {
+      entry.target.setAttribute(OVERFLOW, true)
+    } else {
+      entry.target.removeAttribute(OVERFLOW)
+    }
+  })
+  overflowedElements = document.querySelectorAll(`[${OVERFLOW}]`)
+  // console.log('overflowed', overflowedElements)
+}
+
+const observer = new IntersectionObserver(callback, options)
+
+export const overflowObserver = (options) => (nodeList) => {
+  if (options && options.side) {
+    side = options.side
+  }
+
+  nodeList.forEach((el) => {
+    if (observedElements.has(el)) return
+    observer.observe(el)
+    observedElements.add(el)
+  })
+}
+
+export const isOverflowed = () => overflowedElements.length > 0
+
+export const getOverflowedElements = () => overflowedElements