@open-iframe-resizer/react/dist/open-iframe-resizer-react.umd.js

Open-source modern iframe resizer component

(function(u,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],f):(u=typeof globalThis<"u"?globalThis:u||self,f(u["open-iframe-resizer-react"]={},u["react/jsx-runtime"],u.React))})(this,function(u,f,g){"use strict";"use client";const v=()=>typeof window<"u",x=()=>window.self!==window.top,w=e=>e instanceof HTMLIFrameElement,T=e=>{window.document.readyState==="complete"?e():window.addEventListener("load",e)},A=(e,t)=>{t(),e.addEventListener("load",t)},H=(e,t)=>{var n,r;const i=((n=e.contentWindow)==null?void 0:n.document.readyState)==="complete";return e.src!=="about:blank"&&((r=e.contentWindow)==null?void 0:r.location.href)!=="about:blank"&&i?t():e.addEventListener("load",t)},P=()=>({offsetSize:0,checkOrigin:!0,enableLegacyLibSupport:!1}),D=e=>{try{return new URL(e.src).origin===window.location.origin}catch{return!1}},C=e=>{try{const t=new URL(e.src).origin;if(t!=="about:blank")return t}catch{}return null},W=e=>(Object.keys(e).forEach(t=>e[t]===void 0&&delete e[t]),e),E=e=>{const{height:t,width:n}=e.getBoundingClientRect();return{height:Math.ceil(t),width:Math.ceil(n)}},y=(e,t)=>e?t?e.querySelector(t):e.documentElement:null,S=(e,t)=>{e&&(t.bodyPadding&&(e.body.style.padding=t.bodyPadding),t.bodyMargin&&(e.body.style.margin=t.bodyMargin))},b=e=>e<=100?100:e<=120?1e3:1e4,j=()=>"[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false";function B(e){if(typeof e.data!="string"||!e.data.startsWith("[iFrameSizer]")||!e.data.endsWith("mutationObserver")&&!e.data.endsWith("resizeObserver"))return null;const[t,n]=e.data.split(":"),r=+n;return r>0?r:null}const z=V();let h=[];const q=(e,t)=>{if(!v())return[];const n={...P(),...W(e??{})},r=F(t),i=N(n,r);return r.map(s=>{const o={iframe:s,settings:n,interactionState:{isHovered:!1},initContext:{isInitialized:!1,retryAttempts:0}},a=U(o,i);return h.push(o),{unsubscribe:()=>{a(),h=h.filter(c=>c.iframe!==s)}}})};function F(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)).filter(w):e?w(e)?[e]:[]:Array.from(document.getElementsByTagName("iframe"))}function N(e,t){if(Array.isArray(e.checkOrigin))return e.checkOrigin;if(!e.checkOrigin)return[];const n=[];for(const r of t){const i=C(r);i&&n.push(i)}return n}function U(e,t){const n=D(e.iframe)?G(e):$(e,t),r=K(e);return()=>{n(),r()}}function $(e,t){const{iframe:n,initContext:r,settings:{checkOrigin:i,enableLegacyLibSupport:s,targetElementSelector:o,bodyPadding:a,bodyMargin:c}}=e,l=d=>{var k;const Y=!i||t.includes(d.origin);if(!(n.contentWindow!==d.source||!Y)){if(((k=d.data)==null?void 0:k.type)==="iframe-resized"){const{height:m}=d.data;m&&p({newHeight:m,registeredElement:e});return}if(s){const m=B(d);m!==null&&p({newHeight:m,registeredElement:e});return}}};window.addEventListener("message",l);const M=s?j():{type:"iframe-child-init",targetElementSelector:o,bodyPadding:a,bodyMargin:c},O=()=>{A(n,()=>{var d;return(d=n.contentWindow)==null?void 0:d.postMessage(M,"*")}),r.retryAttempts++,r.retryTimeoutId=window.setTimeout(O,b(r.retryAttempts))};return O(),()=>window.removeEventListener("message",l)}function G(e){const{iframe:t,settings:n}=e,{targetElementSelector:r}=n;let i=0;const s=()=>{const o=y(t.contentDocument,r);if(!t.contentDocument||!o)return i++,setTimeout(s,b(i));S(t.contentDocument,n),z().observe(o)};return H(t,s),()=>{const o=y(t.contentDocument,r);o&&z().unobserve(o),t.removeEventListener("load",s)}}function K({iframe:e,interactionState:t}){const n=()=>{t.isHovered=!0},r=()=>{t.isHovered=!1};return e.addEventListener("mouseenter",n),e.addEventListener("mouseleave",r),()=>{e.removeEventListener("mouseenter",n),e.removeEventListener("mouseleave",r)}}function V(){let e=null;return()=>{if(!e){const t=({target:n})=>{const r=h.find(({iframe:c})=>c.contentDocument===n.ownerDocument);if(!r)return;const{iframe:i,settings:s}=r,o=y(i.contentDocument,s.targetElementSelector);if(!o)return;const{height:a}=E(o);a&&p({newHeight:a,registeredElement:r})};e=new ResizeObserver(n=>n.forEach(t))}return e}}function p({registeredElement:e,newHeight:t}){var n;const{iframe:r,settings:i,interactionState:s,initContext:o}=e;if(o.isInitialized||(o.isInitialized=!0,clearTimeout(o.retryTimeoutId)),((n=i.onBeforeIframeResize)==null?void 0:n.call(i,{iframe:r,settings:{...i},observedHeight:t}))===!1)return;const a=r.getBoundingClientRect(),c=t+i.offsetSize;if(r.style.height=`${c}px`,!i.onIframeResize)return;const l={iframe:r,settings:{...i},interactionState:{...s},previousRenderState:{rect:a},nextRenderState:{rect:r.getBoundingClientRect()}};i.onIframeResize(l)}const _=Q();let L=!1;J();function J(){!v()||!x()||window.addEventListener("message",e=>{var t;((t=e.data)==null?void 0:t.type)==="iframe-child-init"&&T(()=>R(e))})}function R(e,t=0){const{targetElementSelector:n,bodyPadding:r,bodyMargin:i}=e.data,s=y(document,n);if(L||window.parent!==e.source)return;if(!s)return setTimeout(()=>R(e,t+1),b(t));S(document,{bodyMargin:i,bodyPadding:r});const o=_();o.disconnect(),o.observe(s),L=!0}function Q(){let e=null;return()=>(e||(e=new ResizeObserver(t=>{if(!t[0].target)return;const{height:n,width:r}=E(t[0].target),i={type:"iframe-resized",width:r,height:n};window.parent.postMessage(i,"*")})),e)}const I=g.forwardRef((e,t)=>{const n=g.useRef(null),{settings:r,iframeAttributes:i}=X(e);g.useEffect(()=>{if(!n.current)return;const o=q(r,n.current);return()=>o.forEach(a=>a.unsubscribe())},[]);const s=g.useCallback(o=>{n.current=o,typeof t=="function"?t(o):t&&(t.current=o)},[t]);return f.jsx("iframe",{...i,ref:s})});I.displayName="IframeResizer";function X(e){const{offsetSize:t,enableLegacyLibSupport:n,checkOrigin:r,onIframeResize:i,onBeforeIframeResize:s,targetElementSelector:o,bodyMargin:a,bodyPadding:c,...l}=e;return{iframeAttributes:l,settings:{offsetSize:t,enableLegacyLibSupport:n,checkOrigin:r,onIframeResize:i,onBeforeIframeResize:s,targetElementSelector:o,bodyMargin:a,bodyPadding:c}}}u.IframeResizer=I,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});