@open-iframe-resizer/core 1.4.3 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +15 -0
- package/dist/index.js +67 -65
- package/dist/index.umd.cjs +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
export declare type BeforeResizeContext = {
|
|
2
|
+
iframe: HTMLIFrameElement;
|
|
3
|
+
settings: Settings;
|
|
4
|
+
observedHeight: number;
|
|
5
|
+
};
|
|
6
|
+
|
|
1
7
|
export declare type IframeChildInitEventData = {
|
|
2
8
|
type: "iframe-child-init";
|
|
3
9
|
targetElementSelector?: string;
|
|
@@ -93,6 +99,15 @@ export declare type Settings = {
|
|
|
93
99
|
* Default: `undefined`
|
|
94
100
|
*/
|
|
95
101
|
bodyMargin?: string;
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* Called whenever the observed content size changes and the iframe is about to be resized.
|
|
105
|
+
* Return `false` to cancel the resize; returning `true` or nothing will allow it.
|
|
106
|
+
*
|
|
107
|
+
* Default: `undefined`
|
|
108
|
+
*/
|
|
109
|
+
onBeforeIframeResize?: (context: BeforeResizeContext) => boolean | undefined;
|
|
110
|
+
|
|
96
111
|
/**
|
|
97
112
|
* Listener that is called after the iframe has been resized.
|
|
98
113
|
* You can use a predefined handler like `updateParentScrollOnResize` or create your own custom handler.
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
const p = () => typeof window < "u",
|
|
1
|
+
const p = () => typeof window < "u", E = () => window.self !== window.top, b = (e) => e instanceof HTMLIFrameElement, M = (e) => {
|
|
2
2
|
window.document.readyState === "complete" ? e() : window.addEventListener("load", e);
|
|
3
3
|
}, T = (e, t) => {
|
|
4
4
|
t(), e.addEventListener("load", t);
|
|
5
5
|
}, C = (e, t) => {
|
|
6
|
-
var o,
|
|
6
|
+
var o, i;
|
|
7
7
|
const n = ((o = e.contentWindow) == null ? void 0 : o.document.readyState) === "complete";
|
|
8
|
-
return e.src !== "about:blank" && ((
|
|
9
|
-
},
|
|
8
|
+
return e.src !== "about:blank" && ((i = e.contentWindow) == null ? void 0 : i.location.href) !== "about:blank" && n ? t() : e.addEventListener("load", t);
|
|
9
|
+
}, B = () => ({ offsetSize: 0, checkOrigin: !0, enableLegacyLibSupport: !1 }), k = (e) => {
|
|
10
10
|
try {
|
|
11
11
|
return new URL(e.src).origin === window.location.origin;
|
|
12
12
|
} catch {
|
|
@@ -23,31 +23,31 @@ const p = () => typeof window < "u", R = () => window.self !== window.top, b = (
|
|
|
23
23
|
}, W = (e) => (Object.keys(e).forEach((t) => e[t] === void 0 && delete e[t]), e), L = (e) => {
|
|
24
24
|
const { height: t, width: n } = e.getBoundingClientRect();
|
|
25
25
|
return { height: Math.ceil(t), width: Math.ceil(n) };
|
|
26
|
-
},
|
|
26
|
+
}, g = (e, t) => e ? t ? e.querySelector(t) : e.documentElement : null, I = (e, t) => {
|
|
27
27
|
e && (t.bodyPadding && (e.body.style.padding = t.bodyPadding), t.bodyMargin && (e.body.style.margin = t.bodyMargin));
|
|
28
|
-
},
|
|
28
|
+
}, h = (e) => e <= 100 ? 100 : e <= 120 ? 1e3 : 1e4, A = () => "[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false";
|
|
29
29
|
function H(e) {
|
|
30
30
|
if (typeof e.data != "string" || !e.data.startsWith("[iFrameSizer]") || !e.data.endsWith("mutationObserver") && !e.data.endsWith("resizeObserver"))
|
|
31
31
|
return null;
|
|
32
|
-
const [t, n] = e.data.split(":"),
|
|
33
|
-
return
|
|
32
|
+
const [t, n] = e.data.split(":"), r = +n;
|
|
33
|
+
return r > 0 ? r : null;
|
|
34
34
|
}
|
|
35
35
|
const z = q();
|
|
36
|
-
let
|
|
36
|
+
let f = [];
|
|
37
37
|
const K = (e, t) => {
|
|
38
38
|
if (!p())
|
|
39
39
|
return [];
|
|
40
|
-
const n = { ...
|
|
41
|
-
return
|
|
40
|
+
const n = { ...B(), ...W(e ?? {}) }, r = P(t), o = x(n, r);
|
|
41
|
+
return r.map((i) => {
|
|
42
42
|
const s = {
|
|
43
|
-
iframe:
|
|
43
|
+
iframe: i,
|
|
44
44
|
settings: n,
|
|
45
45
|
interactionState: { isHovered: !1 },
|
|
46
46
|
initContext: { isInitialized: !1, retryAttempts: 0 }
|
|
47
47
|
}, a = F(s, o);
|
|
48
|
-
return
|
|
48
|
+
return f.push(s), {
|
|
49
49
|
unsubscribe: () => {
|
|
50
|
-
a(),
|
|
50
|
+
a(), f = f.filter((d) => d.iframe !== i);
|
|
51
51
|
}
|
|
52
52
|
};
|
|
53
53
|
});
|
|
@@ -61,70 +61,70 @@ function x(e, t) {
|
|
|
61
61
|
if (!e.checkOrigin)
|
|
62
62
|
return [];
|
|
63
63
|
const n = [];
|
|
64
|
-
for (const
|
|
65
|
-
const o = D(
|
|
64
|
+
for (const r of t) {
|
|
65
|
+
const o = D(r);
|
|
66
66
|
o && n.push(o);
|
|
67
67
|
}
|
|
68
68
|
return n;
|
|
69
69
|
}
|
|
70
70
|
function F(e, t) {
|
|
71
|
-
const n =
|
|
71
|
+
const n = k(e.iframe) ? U(e) : N(e, t), r = $(e);
|
|
72
72
|
return () => {
|
|
73
|
-
n(),
|
|
73
|
+
n(), r();
|
|
74
74
|
};
|
|
75
75
|
}
|
|
76
76
|
function N(e, t) {
|
|
77
77
|
const {
|
|
78
78
|
iframe: n,
|
|
79
|
-
initContext:
|
|
80
|
-
settings: { checkOrigin: o, enableLegacyLibSupport:
|
|
81
|
-
} = e,
|
|
79
|
+
initContext: r,
|
|
80
|
+
settings: { checkOrigin: o, enableLegacyLibSupport: i, targetElementSelector: s, bodyPadding: a, bodyMargin: d }
|
|
81
|
+
} = e, u = (c) => {
|
|
82
82
|
var y;
|
|
83
|
-
const
|
|
84
|
-
if (!(!(n.contentWindow === c.source) || !
|
|
83
|
+
const S = !o || t.includes(c.origin);
|
|
84
|
+
if (!(!(n.contentWindow === c.source) || !S)) {
|
|
85
85
|
if (((y = c.data) == null ? void 0 : y.type) === "iframe-resized") {
|
|
86
|
-
const { height:
|
|
87
|
-
|
|
86
|
+
const { height: l } = c.data;
|
|
87
|
+
l && m({ newHeight: l, registeredElement: e });
|
|
88
88
|
return;
|
|
89
89
|
}
|
|
90
|
-
if (
|
|
91
|
-
const
|
|
92
|
-
|
|
90
|
+
if (i) {
|
|
91
|
+
const l = H(c);
|
|
92
|
+
l !== null && m({ newHeight: l, registeredElement: e });
|
|
93
93
|
return;
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
};
|
|
97
|
-
window.addEventListener("message",
|
|
98
|
-
const
|
|
97
|
+
window.addEventListener("message", u);
|
|
98
|
+
const R = i ? A() : { type: "iframe-child-init", targetElementSelector: s, bodyPadding: a, bodyMargin: d }, w = () => {
|
|
99
99
|
T(n, () => {
|
|
100
100
|
var c;
|
|
101
|
-
return (c = n.contentWindow) == null ? void 0 : c.postMessage(
|
|
102
|
-
}),
|
|
101
|
+
return (c = n.contentWindow) == null ? void 0 : c.postMessage(R, "*");
|
|
102
|
+
}), r.retryAttempts++, r.retryTimeoutId = window.setTimeout(w, h(r.retryAttempts));
|
|
103
103
|
};
|
|
104
|
-
return w(), () => window.removeEventListener("message",
|
|
104
|
+
return w(), () => window.removeEventListener("message", u);
|
|
105
105
|
}
|
|
106
106
|
function U(e) {
|
|
107
|
-
const { iframe: t, settings: n } = e, { targetElementSelector:
|
|
107
|
+
const { iframe: t, settings: n } = e, { targetElementSelector: r } = n;
|
|
108
108
|
let o = 0;
|
|
109
|
-
const
|
|
110
|
-
const s =
|
|
109
|
+
const i = () => {
|
|
110
|
+
const s = g(t.contentDocument, r);
|
|
111
111
|
if (!t.contentDocument || !s)
|
|
112
|
-
return o++, setTimeout(
|
|
113
|
-
|
|
112
|
+
return o++, setTimeout(i, h(o));
|
|
113
|
+
I(t.contentDocument, n), z().observe(s);
|
|
114
114
|
};
|
|
115
|
-
return C(t,
|
|
116
|
-
const s =
|
|
117
|
-
s && z().unobserve(s), t.removeEventListener("load",
|
|
115
|
+
return C(t, i), () => {
|
|
116
|
+
const s = g(t.contentDocument, r);
|
|
117
|
+
s && z().unobserve(s), t.removeEventListener("load", i);
|
|
118
118
|
};
|
|
119
119
|
}
|
|
120
120
|
function $({ iframe: e, interactionState: t }) {
|
|
121
121
|
const n = () => {
|
|
122
122
|
t.isHovered = !0;
|
|
123
|
-
},
|
|
123
|
+
}, r = () => {
|
|
124
124
|
t.isHovered = !1;
|
|
125
125
|
};
|
|
126
|
-
return e.addEventListener("mouseenter", n), e.addEventListener("mouseleave",
|
|
127
|
-
e.removeEventListener("mouseenter", n), e.removeEventListener("mouseleave",
|
|
126
|
+
return e.addEventListener("mouseenter", n), e.addEventListener("mouseleave", r), () => {
|
|
127
|
+
e.removeEventListener("mouseenter", n), e.removeEventListener("mouseleave", r);
|
|
128
128
|
};
|
|
129
129
|
}
|
|
130
130
|
function q() {
|
|
@@ -132,62 +132,64 @@ function q() {
|
|
|
132
132
|
return () => {
|
|
133
133
|
if (!e) {
|
|
134
134
|
const t = ({ target: n }) => {
|
|
135
|
-
const
|
|
136
|
-
if (!
|
|
135
|
+
const r = f.find(({ iframe: d }) => d.contentDocument === n.ownerDocument);
|
|
136
|
+
if (!r)
|
|
137
137
|
return;
|
|
138
|
-
const { iframe: o, settings:
|
|
138
|
+
const { iframe: o, settings: i } = r, s = g(o.contentDocument, i.targetElementSelector);
|
|
139
139
|
if (!s)
|
|
140
140
|
return;
|
|
141
141
|
const { height: a } = L(s);
|
|
142
|
-
a &&
|
|
142
|
+
a && m({ newHeight: a, registeredElement: r });
|
|
143
143
|
};
|
|
144
144
|
e = new ResizeObserver((n) => n.forEach(t));
|
|
145
145
|
}
|
|
146
146
|
return e;
|
|
147
147
|
};
|
|
148
148
|
}
|
|
149
|
-
function
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
149
|
+
function m({ registeredElement: e, newHeight: t }) {
|
|
150
|
+
var u;
|
|
151
|
+
const { iframe: n, settings: r, interactionState: o, initContext: i } = e;
|
|
152
|
+
if (i.isInitialized || (i.isInitialized = !0, clearTimeout(i.retryTimeoutId)), ((u = r.onBeforeIframeResize) == null ? void 0 : u.call(r, { iframe: n, settings: { ...r }, observedHeight: t })) === !1)
|
|
153
|
+
return;
|
|
154
|
+
const s = n.getBoundingClientRect(), a = t + r.offsetSize;
|
|
155
|
+
if (n.style.height = `${a}px`, !r.onIframeResize)
|
|
154
156
|
return;
|
|
155
157
|
const d = {
|
|
156
158
|
iframe: n,
|
|
157
|
-
settings: { ...
|
|
159
|
+
settings: { ...r },
|
|
158
160
|
interactionState: { ...o },
|
|
159
161
|
previousRenderState: { rect: s },
|
|
160
162
|
nextRenderState: { rect: n.getBoundingClientRect() }
|
|
161
163
|
};
|
|
162
|
-
|
|
164
|
+
r.onIframeResize(d);
|
|
163
165
|
}
|
|
164
166
|
const V = G();
|
|
165
167
|
let v = !1;
|
|
166
168
|
_();
|
|
167
169
|
function _() {
|
|
168
|
-
!p() || !
|
|
170
|
+
!p() || !E() || window.addEventListener("message", (e) => {
|
|
169
171
|
var t;
|
|
170
|
-
((t = e.data) == null ? void 0 : t.type) === "iframe-child-init" && M(() =>
|
|
172
|
+
((t = e.data) == null ? void 0 : t.type) === "iframe-child-init" && M(() => O(e));
|
|
171
173
|
});
|
|
172
174
|
}
|
|
173
|
-
function
|
|
174
|
-
const { targetElementSelector: n, bodyPadding:
|
|
175
|
+
function O(e, t = 0) {
|
|
176
|
+
const { targetElementSelector: n, bodyPadding: r, bodyMargin: o } = e.data, i = g(document, n);
|
|
175
177
|
if (v || window.parent !== e.source)
|
|
176
178
|
return;
|
|
177
|
-
if (!
|
|
178
|
-
return setTimeout(() =>
|
|
179
|
-
|
|
179
|
+
if (!i)
|
|
180
|
+
return setTimeout(() => O(e, t + 1), h(t));
|
|
181
|
+
I(document, { bodyMargin: o, bodyPadding: r });
|
|
180
182
|
const s = V();
|
|
181
|
-
s.disconnect(), s.observe(
|
|
183
|
+
s.disconnect(), s.observe(i), v = !0;
|
|
182
184
|
}
|
|
183
185
|
function G() {
|
|
184
186
|
let e = null;
|
|
185
187
|
return () => (e || (e = new ResizeObserver((t) => {
|
|
186
188
|
if (!t[0].target)
|
|
187
189
|
return;
|
|
188
|
-
const { height: n, width:
|
|
190
|
+
const { height: n, width: r } = L(t[0].target), o = {
|
|
189
191
|
type: "iframe-resized",
|
|
190
|
-
width:
|
|
192
|
+
width: r,
|
|
191
193
|
height: n
|
|
192
194
|
};
|
|
193
195
|
window.parent.postMessage(o, "*");
|
package/dist/index.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(a,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(a=typeof globalThis<"u"?globalThis:a||self,l(a.iframeResizer={}))})(this,function(a){"use strict";const l=()=>typeof window<"u",E=()=>window.self!==window.top,w=e=>e instanceof HTMLIFrameElement,T=e=>{window.document.readyState==="complete"?e():window.addEventListener("load",e)},M=(e,t)=>{t(),e.addEventListener("load",t)},C=(e,t)=>{var o,r;const n=((o=e.contentWindow)==null?void 0:o.document.readyState)==="complete";return e.src!=="about:blank"&&((r=e.contentWindow)==null?void 0:r.location.href)!=="about:blank"&&n?t():e.addEventListener("load",t)},
|
|
1
|
+
(function(a,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(a=typeof globalThis<"u"?globalThis:a||self,l(a.iframeResizer={}))})(this,function(a){"use strict";const l=()=>typeof window<"u",E=()=>window.self!==window.top,w=e=>e instanceof HTMLIFrameElement,T=e=>{window.document.readyState==="complete"?e():window.addEventListener("load",e)},M=(e,t)=>{t(),e.addEventListener("load",t)},C=(e,t)=>{var o,r;const n=((o=e.contentWindow)==null?void 0:o.document.readyState)==="complete";return e.src!=="about:blank"&&((r=e.contentWindow)==null?void 0:r.location.href)!=="about:blank"&&n?t():e.addEventListener("load",t)},B=()=>({offsetSize:0,checkOrigin:!0,enableLegacyLibSupport:!1}),k=e=>{try{return new URL(e.src).origin===window.location.origin}catch{return!1}},D=e=>{try{const t=new URL(e.src).origin;if(t!=="about:blank")return t}catch{}return null},P=e=>(Object.keys(e).forEach(t=>e[t]===void 0&&delete e[t]),e),z=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,p=(e,t)=>{e&&(t.bodyPadding&&(e.body.style.padding=t.bodyPadding),t.bodyMargin&&(e.body.style.margin=t.bodyMargin))},y=e=>e<=100?100:e<=120?1e3:1e4,W=()=>"[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false";function A(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(":"),i=+n;return i>0?i:null}const v=V();let h=[];const H=(e,t)=>{if(!l())return[];const n={...B(),...P(e??{})},i=x(t),o=F(n,i);return i.map(r=>{const s={iframe:r,settings:n,interactionState:{isHovered:!1},initContext:{isInitialized:!1,retryAttempts:0}},c=N(s,o);return h.push(s),{unsubscribe:()=>{c(),h=h.filter(u=>u.iframe!==r)}}})};function x(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)).filter(w):e?w(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 i of t){const o=D(i);o&&n.push(o)}return n}function N(e,t){const n=k(e.iframe)?$(e):U(e,t),i=q(e);return()=>{n(),i()}}function U(e,t){const{iframe:n,initContext:i,settings:{checkOrigin:o,enableLegacyLibSupport:r,targetElementSelector:s,bodyPadding:c,bodyMargin:u}}=e,f=d=>{var R;const K=!o||t.includes(d.origin);if(!(!(n.contentWindow===d.source)||!K)){if(((R=d.data)==null?void 0:R.type)==="iframe-resized"){const{height:g}=d.data;g&&b({newHeight:g,registeredElement:e});return}if(r){const g=A(d);g!==null&&b({newHeight:g,registeredElement:e});return}}};window.addEventListener("message",f);const J=r?W():{type:"iframe-child-init",targetElementSelector:s,bodyPadding:c,bodyMargin:u},S=()=>{M(n,()=>{var d;return(d=n.contentWindow)==null?void 0:d.postMessage(J,"*")}),i.retryAttempts++,i.retryTimeoutId=window.setTimeout(S,y(i.retryAttempts))};return S(),()=>window.removeEventListener("message",f)}function $(e){const{iframe:t,settings:n}=e,{targetElementSelector:i}=n;let o=0;const r=()=>{const s=m(t.contentDocument,i);if(!t.contentDocument||!s)return o++,setTimeout(r,y(o));p(t.contentDocument,n),v().observe(s)};return C(t,r),()=>{const s=m(t.contentDocument,i);s&&v().unobserve(s),t.removeEventListener("load",r)}}function q({iframe:e,interactionState:t}){const n=()=>{t.isHovered=!0},i=()=>{t.isHovered=!1};return e.addEventListener("mouseenter",n),e.addEventListener("mouseleave",i),()=>{e.removeEventListener("mouseenter",n),e.removeEventListener("mouseleave",i)}}function V(){let e=null;return()=>{if(!e){const t=({target:n})=>{const i=h.find(({iframe:u})=>u.contentDocument===n.ownerDocument);if(!i)return;const{iframe:o,settings:r}=i,s=m(o.contentDocument,r.targetElementSelector);if(!s)return;const{height:c}=z(s);c&&b({newHeight:c,registeredElement:i})};e=new ResizeObserver(n=>n.forEach(t))}return e}}function b({registeredElement:e,newHeight:t}){var f;const{iframe:n,settings:i,interactionState:o,initContext:r}=e;if(r.isInitialized||(r.isInitialized=!0,clearTimeout(r.retryTimeoutId)),((f=i.onBeforeIframeResize)==null?void 0:f.call(i,{iframe:n,settings:{...i},observedHeight:t}))===!1)return;const s=n.getBoundingClientRect(),c=t+i.offsetSize;if(n.style.height=`${c}px`,!i.onIframeResize)return;const u={iframe:n,settings:{...i},interactionState:{...o},previousRenderState:{rect:s},nextRenderState:{rect:n.getBoundingClientRect()}};i.onIframeResize(u)}const _=j();let L=!1;O();function O(){!l()||!E()||window.addEventListener("message",e=>{var t;((t=e.data)==null?void 0:t.type)==="iframe-child-init"&&T(()=>I(e))})}function I(e,t=0){const{targetElementSelector:n,bodyPadding:i,bodyMargin:o}=e.data,r=m(document,n);if(L||window.parent!==e.source)return;if(!r)return setTimeout(()=>I(e,t+1),y(t));p(document,{bodyMargin:o,bodyPadding:i});const s=_();s.disconnect(),s.observe(r),L=!0}function j(){let e=null;return()=>(e||(e=new ResizeObserver(t=>{if(!t[0].target)return;const{height:n,width:i}=z(t[0].target),o={type:"iframe-resized",width:i,height:n};window.parent.postMessage(o,"*")})),e)}const G=({previousRenderState:e,nextRenderState:t,iframe:n})=>{document.activeElement===n&&window.scrollBy(0,t.rect.bottom-e.rect.bottom)};a.initialize=H,a.initializeChildListener=O,a.updateParentScrollOnResize=G,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
|