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

Open-source modern iframe resizer component

(function(d,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(d=typeof globalThis<"u"?globalThis:d||self,s(d["open-iframe-resizer-vue"]={},d.Vue))})(this,function(d,s){"use strict";const v=()=>typeof window<"u",M=()=>window.self!==window.top,p=e=>e instanceof HTMLIFrameElement,k=e=>{window.document.readyState==="complete"?e():window.addEventListener("load",e)},B=(e,t)=>{t(),e.addEventListener("load",t)},P=(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)},T=()=>({offsetSize:0,checkOrigin:!0,enableLegacyLibSupport:!1}),A=e=>{try{return new URL(e.src).origin===window.location.origin}catch{return!1}},H=e=>{try{const t=new URL(e.src).origin;if(t!=="about:blank")return t}catch{}return null},_=e=>(Object.keys(e).forEach(t=>e[t]===void 0&&delete e[t]),e),w=e=>{const{height:t,width:n}=e.getBoundingClientRect();return{height:Math.ceil(t),width:Math.ceil(n)}},m=(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,D=()=>"[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false";function x(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=U();let g=[];const C=(e,t)=>{if(!v())return[];const n={...T(),..._(e??{})},r=W(t),i=F(n,r);return r.map(a=>{const o={iframe:a,settings:n,interactionState:{isHovered:!1},initContext:{isInitialized:!1,retryAttempts:0}},c=$(o,i);return g.push(o),{unsubscribe:()=>{c(),g=g.filter(l=>l.iframe!==a)}}})};function W(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)).filter(p):e?p(e)?[e]:[]:Array.from(document.getElementsByTagName("iframe"))}function F(e,t){if(Array.isArray(e.checkOrigin))return e.checkOrigin;if(!e.checkOrigin)return[];const n=[];for(const r of t){const i=H(r);i&&n.push(i)}return n}function $(e,t){const n=A(e.iframe)?N(e):j(e,t),r=q(e);return()=>{n(),r()}}function j(e,t){const{iframe:n,initContext:r,settings:{checkOrigin:i,enableLegacyLibSupport:a,targetElementSelector:o,bodyPadding:c,bodyMargin:l}}=e,y=u=>{var O;const ee=!i||t.includes(u.origin);if(!(n.contentWindow!==u.source||!ee)){if(((O=u.data)==null?void 0:O.type)==="iframe-resized"){const{height:f}=u.data;f&&h({newHeight:f,registeredElement:e});return}if(a){const f=x(u);f!==null&&h({newHeight:f,registeredElement:e});return}}};window.addEventListener("message",y);const Z=a?D():{type:"iframe-child-init",targetElementSelector:o,bodyPadding:c,bodyMargin:l},I=()=>{B(n,()=>{var u;return(u=n.contentWindow)==null?void 0:u.postMessage(Z,"*")}),r.retryAttempts++,r.retryTimeoutId=window.setTimeout(I,b(r.retryAttempts))};return I(),()=>window.removeEventListener("message",y)}function N(e){const{iframe:t,settings:n}=e,{targetElementSelector:r}=n;let i=0;const a=()=>{const o=m(t.contentDocument,r);if(!t.contentDocument||!o)return i++,setTimeout(a,b(i));S(t.contentDocument,n),z().observe(o)};return P(t,a),()=>{const o=m(t.contentDocument,r);o&&z().unobserve(o),t.removeEventListener("load",a)}}function q({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 U(){let e=null;return()=>{if(!e){const t=({target:n})=>{const r=g.find(({iframe:l})=>l.contentDocument===n.ownerDocument);if(!r)return;const{iframe:i,settings:a}=r,o=m(i.contentDocument,a.targetElementSelector);if(!o)return;const{height:c}=w(o);c&&h({newHeight:c,registeredElement:r})};e=new ResizeObserver(n=>n.forEach(t))}return e}}function h({registeredElement:e,newHeight:t}){var n;const{iframe:r,settings:i,interactionState:a,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 c=r.getBoundingClientRect(),l=t+i.offsetSize;if(r.style.height=`${l}px`,!i.onIframeResize)return;const y={iframe:r,settings:{...i},interactionState:{...a},previousRenderState:{rect:c},nextRenderState:{rect:r.getBoundingClientRect()}};i.onIframeResize(y)}const V=K();let E=!1;G();function G(){!v()||!M()||window.addEventListener("message",e=>{var t;((t=e.data)==null?void 0:t.type)==="iframe-child-init"&&k(()=>R(e))})}function R(e,t=0){const{targetElementSelector:n,bodyPadding:r,bodyMargin:i}=e.data,a=m(document,n);if(E||window.parent!==e.source)return;if(!a)return setTimeout(()=>R(e,t+1),b(t));S(document,{bodyMargin:i,bodyPadding:r});const o=V();o.disconnect(),o.observe(a),E=!0}function K(){let e=null;return()=>(e||(e=new ResizeObserver(t=>{if(!t[0].target)return;const{height:n,width:r}=w(t[0].target),i={type:"iframe-resized",width:r,height:n};window.parent.postMessage(i,"*")})),e)}const J=s.defineComponent({name:"ResizableIframe",props:{offsetSize:[String,Number,Object],checkOrigin:[Boolean,Array],onIframeResize:Function,onBeforeIframeResize:Function,targetElementSelector:[String],bodyMargin:[String,Number],bodyPadding:[String,Number],enableLegacyLibSupport:Boolean},setup(e,{attrs:t}){const n=s.ref(null);let r=[];const i=a=>{const o={offsetSize:e.offsetSize,enableLegacyLibSupport:e.enableLegacyLibSupport,checkOrigin:e.checkOrigin,onIframeResize:e.onIframeResize,onBeforeIframeResize:e.onBeforeIframeResize,targetElementSelector:e.targetElementSelector,bodyMargin:e.bodyMargin,bodyPadding:e.bodyPadding};Object.keys(o).forEach(c=>{o[c]===void 0&&delete o[c]}),r=C(o,a)};return s.onMounted(()=>{n.value&&i(n.value)}),s.onBeforeUnmount(()=>{r.forEach(a=>a.unsubscribe()),r=[]}),{iframeRef:n,attrs:t}}}),Q=(e,t)=>{const n=e.__vccOpts||e;for(const[r,i]of t)n[r]=i;return n};function X(e,t,n,r,i,a){return s.openBlock(),s.createElementBlock("iframe",s.mergeProps({ref:"iframeRef"},e.$attrs),null,16)}const L=Q(J,[["render",X]]),Y={install(e){e.component("IframeResizer",L)}};d.IframeResizer=L,d.IframeResizerPlugin=Y,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});