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

Open-source modern iframe resizer component

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