@open-iframe-resizer/core 1.5.0 → 1.6.1
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.js +105 -110
- package/dist/index.umd.cjs +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,18 +1,17 @@
|
|
|
1
|
-
const
|
|
1
|
+
const v = () => typeof window < "u", S = () => window.self !== window.top, y = (e) => e instanceof HTMLIFrameElement, E = (e) => {
|
|
2
2
|
window.document.readyState === "complete" ? e() : window.addEventListener("load", e);
|
|
3
|
-
},
|
|
3
|
+
}, M = (e, t) => {
|
|
4
4
|
t(), e.addEventListener("load", t);
|
|
5
|
-
},
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}, B = () => ({ offsetSize: 0, checkOrigin: !0, enableLegacyLibSupport: !1 }), k = (e) => {
|
|
5
|
+
}, T = (e, t) => {
|
|
6
|
+
const n = e.contentWindow?.document.readyState === "complete";
|
|
7
|
+
return e.src !== "about:blank" && e.contentWindow?.location.href !== "about:blank" && n ? t() : e.addEventListener("load", t);
|
|
8
|
+
}, C = () => ({ offsetSize: 0, checkOrigin: !0, enableLegacyLibSupport: !1 }), B = (e) => {
|
|
10
9
|
try {
|
|
11
10
|
return new URL(e.src).origin === window.location.origin;
|
|
12
11
|
} catch {
|
|
13
12
|
return !1;
|
|
14
13
|
}
|
|
15
|
-
},
|
|
14
|
+
}, k = (e) => {
|
|
16
15
|
try {
|
|
17
16
|
const t = new URL(e.src).origin;
|
|
18
17
|
if (t !== "about:blank")
|
|
@@ -20,186 +19,182 @@ const p = () => typeof window < "u", E = () => window.self !== window.top, b = (
|
|
|
20
19
|
} catch {
|
|
21
20
|
}
|
|
22
21
|
return null;
|
|
23
|
-
},
|
|
22
|
+
}, D = (e) => (Object.keys(e).forEach((t) => {
|
|
23
|
+
e[t] === void 0 && delete e[t];
|
|
24
|
+
}), e), p = (e) => {
|
|
24
25
|
const { height: t, width: n } = e.getBoundingClientRect();
|
|
25
26
|
return { height: Math.ceil(t), width: Math.ceil(n) };
|
|
26
|
-
},
|
|
27
|
+
}, f = (e, t) => e ? t ? e.querySelector(t) : e.documentElement : null, L = (e, t) => {
|
|
27
28
|
e && (t.bodyPadding && (e.body.style.padding = t.bodyPadding), t.bodyMargin && (e.body.style.margin = t.bodyMargin));
|
|
28
|
-
},
|
|
29
|
-
function
|
|
29
|
+
}, m = (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";
|
|
30
|
+
function A(e) {
|
|
30
31
|
if (typeof e.data != "string" || !e.data.startsWith("[iFrameSizer]") || !e.data.endsWith("mutationObserver") && !e.data.endsWith("resizeObserver"))
|
|
31
32
|
return null;
|
|
32
|
-
const [t, n] = e.data.split(":"),
|
|
33
|
-
return
|
|
33
|
+
const [t, n] = e.data.split(":"), i = +n;
|
|
34
|
+
return i > 0 ? i : null;
|
|
34
35
|
}
|
|
35
|
-
const
|
|
36
|
-
let
|
|
37
|
-
const
|
|
38
|
-
if (!
|
|
36
|
+
const b = _();
|
|
37
|
+
let l = [];
|
|
38
|
+
const J = (e, t) => {
|
|
39
|
+
if (!v())
|
|
39
40
|
return [];
|
|
40
|
-
const n = { ...
|
|
41
|
-
return
|
|
42
|
-
const
|
|
43
|
-
iframe:
|
|
41
|
+
const n = { ...C(), ...D(e ?? {}) }, i = H(t), s = P(n, i);
|
|
42
|
+
return i.map((r) => {
|
|
43
|
+
const o = {
|
|
44
|
+
iframe: r,
|
|
44
45
|
settings: n,
|
|
45
46
|
interactionState: { isHovered: !1 },
|
|
46
47
|
initContext: { isInitialized: !1, retryAttempts: 0 }
|
|
47
|
-
}, a =
|
|
48
|
-
return
|
|
48
|
+
}, a = x(o, s);
|
|
49
|
+
return l.push(o), {
|
|
49
50
|
unsubscribe: () => {
|
|
50
|
-
a(),
|
|
51
|
+
a(), l = l.filter((c) => c.iframe !== r);
|
|
51
52
|
}
|
|
52
53
|
};
|
|
53
54
|
});
|
|
54
55
|
};
|
|
55
|
-
function
|
|
56
|
-
return typeof e == "string" ? Array.from(document.querySelectorAll(e)).filter(
|
|
56
|
+
function H(e) {
|
|
57
|
+
return typeof e == "string" ? Array.from(document.querySelectorAll(e)).filter(y) : e ? y(e) ? [e] : [] : Array.from(document.getElementsByTagName("iframe"));
|
|
57
58
|
}
|
|
58
|
-
function
|
|
59
|
+
function P(e, t) {
|
|
59
60
|
if (Array.isArray(e.checkOrigin))
|
|
60
61
|
return e.checkOrigin;
|
|
61
62
|
if (!e.checkOrigin)
|
|
62
63
|
return [];
|
|
63
64
|
const n = [];
|
|
64
|
-
for (const
|
|
65
|
-
const
|
|
66
|
-
|
|
65
|
+
for (const i of t) {
|
|
66
|
+
const s = k(i);
|
|
67
|
+
s && n.push(s);
|
|
67
68
|
}
|
|
68
69
|
return n;
|
|
69
70
|
}
|
|
70
|
-
function
|
|
71
|
-
const n =
|
|
71
|
+
function x(e, t) {
|
|
72
|
+
const n = B(e.iframe) ? N(e) : F(e, t), i = U(e);
|
|
72
73
|
return () => {
|
|
73
|
-
n(),
|
|
74
|
+
n(), i();
|
|
74
75
|
};
|
|
75
76
|
}
|
|
76
|
-
function
|
|
77
|
+
function F(e, t) {
|
|
77
78
|
const {
|
|
78
79
|
iframe: n,
|
|
79
|
-
initContext:
|
|
80
|
-
settings: { checkOrigin:
|
|
81
|
-
} = e,
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
l && m({ newHeight: l, registeredElement: e });
|
|
80
|
+
initContext: i,
|
|
81
|
+
settings: { checkOrigin: s, enableLegacyLibSupport: r, targetElementSelector: o, bodyPadding: a, bodyMargin: c }
|
|
82
|
+
} = e, h = (d) => {
|
|
83
|
+
const R = !s || t.includes(d.origin);
|
|
84
|
+
if (!(!(n.contentWindow === d.source) || !R)) {
|
|
85
|
+
if (d.data?.type === "iframe-resized") {
|
|
86
|
+
const { height: u } = d.data;
|
|
87
|
+
u && g({ newHeight: u, registeredElement: e });
|
|
88
88
|
return;
|
|
89
89
|
}
|
|
90
|
-
if (
|
|
91
|
-
const
|
|
92
|
-
|
|
90
|
+
if (r) {
|
|
91
|
+
const u = A(d);
|
|
92
|
+
u !== null && g({ newHeight: u, registeredElement: e });
|
|
93
93
|
return;
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
};
|
|
97
|
-
window.addEventListener("message",
|
|
98
|
-
const
|
|
99
|
-
|
|
100
|
-
var c;
|
|
101
|
-
return (c = n.contentWindow) == null ? void 0 : c.postMessage(R, "*");
|
|
102
|
-
}), r.retryAttempts++, r.retryTimeoutId = window.setTimeout(w, h(r.retryAttempts));
|
|
97
|
+
window.addEventListener("message", h);
|
|
98
|
+
const O = r ? W() : { type: "iframe-child-init", targetElementSelector: o, bodyPadding: a, bodyMargin: c }, w = () => {
|
|
99
|
+
M(n, () => n.contentWindow?.postMessage(O, "*")), i.retryAttempts++, i.retryTimeoutId = window.setTimeout(w, m(i.retryAttempts));
|
|
103
100
|
};
|
|
104
|
-
return w(), () => window.removeEventListener("message",
|
|
101
|
+
return w(), () => window.removeEventListener("message", h);
|
|
105
102
|
}
|
|
106
|
-
function
|
|
107
|
-
const { iframe: t, settings: n } = e, { targetElementSelector:
|
|
108
|
-
let
|
|
109
|
-
const
|
|
110
|
-
const
|
|
111
|
-
if (!t.contentDocument || !
|
|
112
|
-
return
|
|
113
|
-
|
|
103
|
+
function N(e) {
|
|
104
|
+
const { iframe: t, settings: n } = e, { targetElementSelector: i } = n;
|
|
105
|
+
let s = 0;
|
|
106
|
+
const r = () => {
|
|
107
|
+
const o = f(t.contentDocument, i);
|
|
108
|
+
if (!t.contentDocument || !o)
|
|
109
|
+
return s++, setTimeout(r, m(s));
|
|
110
|
+
L(t.contentDocument, n), b().observe(o);
|
|
114
111
|
};
|
|
115
|
-
return
|
|
116
|
-
const
|
|
117
|
-
|
|
112
|
+
return T(t, r), () => {
|
|
113
|
+
const o = f(t.contentDocument, i);
|
|
114
|
+
o && b().unobserve(o), t.removeEventListener("load", r);
|
|
118
115
|
};
|
|
119
116
|
}
|
|
120
|
-
function
|
|
117
|
+
function U({ iframe: e, interactionState: t }) {
|
|
121
118
|
const n = () => {
|
|
122
119
|
t.isHovered = !0;
|
|
123
|
-
},
|
|
120
|
+
}, i = () => {
|
|
124
121
|
t.isHovered = !1;
|
|
125
122
|
};
|
|
126
|
-
return e.addEventListener("mouseenter", n), e.addEventListener("mouseleave",
|
|
127
|
-
e.removeEventListener("mouseenter", n), e.removeEventListener("mouseleave",
|
|
123
|
+
return e.addEventListener("mouseenter", n), e.addEventListener("mouseleave", i), () => {
|
|
124
|
+
e.removeEventListener("mouseenter", n), e.removeEventListener("mouseleave", i);
|
|
128
125
|
};
|
|
129
126
|
}
|
|
130
|
-
function
|
|
127
|
+
function _() {
|
|
131
128
|
let e = null;
|
|
132
129
|
return () => {
|
|
133
130
|
if (!e) {
|
|
134
131
|
const t = ({ target: n }) => {
|
|
135
|
-
const
|
|
136
|
-
if (!
|
|
132
|
+
const i = l.find(({ iframe: c }) => c.contentDocument === n.ownerDocument);
|
|
133
|
+
if (!i)
|
|
137
134
|
return;
|
|
138
|
-
const { iframe:
|
|
139
|
-
if (!
|
|
135
|
+
const { iframe: s, settings: r } = i, o = f(s.contentDocument, r.targetElementSelector);
|
|
136
|
+
if (!o)
|
|
140
137
|
return;
|
|
141
|
-
const { height: a } =
|
|
142
|
-
a &&
|
|
138
|
+
const { height: a } = p(o);
|
|
139
|
+
a && g({ newHeight: a, registeredElement: i });
|
|
143
140
|
};
|
|
144
141
|
e = new ResizeObserver((n) => n.forEach(t));
|
|
145
142
|
}
|
|
146
143
|
return e;
|
|
147
144
|
};
|
|
148
145
|
}
|
|
149
|
-
function
|
|
150
|
-
|
|
151
|
-
|
|
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)
|
|
146
|
+
function g({ registeredElement: e, newHeight: t }) {
|
|
147
|
+
const { iframe: n, settings: i, interactionState: s, initContext: r } = e;
|
|
148
|
+
if (r.isInitialized || (r.isInitialized = !0, clearTimeout(r.retryTimeoutId)), i.onBeforeIframeResize?.({ iframe: n, settings: { ...i }, observedHeight: t }) === !1)
|
|
153
149
|
return;
|
|
154
|
-
const
|
|
155
|
-
if (n.style.height = `${a}px`, !
|
|
150
|
+
const o = n.getBoundingClientRect(), a = t + i.offsetSize;
|
|
151
|
+
if (n.style.height = `${a}px`, !i.onIframeResize)
|
|
156
152
|
return;
|
|
157
|
-
const
|
|
153
|
+
const c = {
|
|
158
154
|
iframe: n,
|
|
159
|
-
settings: { ...
|
|
160
|
-
interactionState: { ...
|
|
161
|
-
previousRenderState: { rect:
|
|
155
|
+
settings: { ...i },
|
|
156
|
+
interactionState: { ...s },
|
|
157
|
+
previousRenderState: { rect: o },
|
|
162
158
|
nextRenderState: { rect: n.getBoundingClientRect() }
|
|
163
159
|
};
|
|
164
|
-
|
|
160
|
+
i.onIframeResize(c);
|
|
165
161
|
}
|
|
166
|
-
const
|
|
167
|
-
let
|
|
168
|
-
|
|
169
|
-
function
|
|
170
|
-
!
|
|
171
|
-
|
|
172
|
-
((t = e.data) == null ? void 0 : t.type) === "iframe-child-init" && M(() => O(e));
|
|
162
|
+
const $ = V();
|
|
163
|
+
let z = !1;
|
|
164
|
+
q();
|
|
165
|
+
function q() {
|
|
166
|
+
!v() || !S() || window.addEventListener("message", (e) => {
|
|
167
|
+
e.data?.type === "iframe-child-init" && E(() => I(e));
|
|
173
168
|
});
|
|
174
169
|
}
|
|
175
|
-
function
|
|
176
|
-
const { targetElementSelector: n, bodyPadding:
|
|
177
|
-
if (
|
|
170
|
+
function I(e, t = 0) {
|
|
171
|
+
const { targetElementSelector: n, bodyPadding: i, bodyMargin: s } = e.data, r = f(document, n);
|
|
172
|
+
if (z || window.parent !== e.source)
|
|
178
173
|
return;
|
|
179
|
-
if (!
|
|
180
|
-
return setTimeout(() =>
|
|
181
|
-
|
|
182
|
-
const
|
|
183
|
-
|
|
174
|
+
if (!r)
|
|
175
|
+
return setTimeout(() => I(e, t + 1), m(t));
|
|
176
|
+
L(document, { bodyMargin: s, bodyPadding: i });
|
|
177
|
+
const o = $();
|
|
178
|
+
o.disconnect(), o.observe(r), z = !0;
|
|
184
179
|
}
|
|
185
|
-
function
|
|
180
|
+
function V() {
|
|
186
181
|
let e = null;
|
|
187
182
|
return () => (e || (e = new ResizeObserver((t) => {
|
|
188
183
|
if (!t[0].target)
|
|
189
184
|
return;
|
|
190
|
-
const { height: n, width:
|
|
185
|
+
const { height: n, width: i } = p(t[0].target), s = {
|
|
191
186
|
type: "iframe-resized",
|
|
192
|
-
width:
|
|
187
|
+
width: i,
|
|
193
188
|
height: n
|
|
194
189
|
};
|
|
195
|
-
window.parent.postMessage(
|
|
190
|
+
window.parent.postMessage(s, "*");
|
|
196
191
|
})), e);
|
|
197
192
|
}
|
|
198
|
-
const
|
|
193
|
+
const K = ({ previousRenderState: e, nextRenderState: t, iframe: n }) => {
|
|
199
194
|
document.activeElement === n && window.scrollBy(0, t.rect.bottom - e.rect.bottom);
|
|
200
195
|
};
|
|
201
196
|
export {
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
197
|
+
J as initialize,
|
|
198
|
+
q as initializeChildListener,
|
|
199
|
+
K as updateParentScrollOnResize
|
|
205
200
|
};
|
package/dist/index.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(a,
|
|
1
|
+
(function(a,u){typeof exports=="object"&&typeof module<"u"?u(exports):typeof define=="function"&&define.amd?define(["exports"],u):(a=typeof globalThis<"u"?globalThis:a||self,u(a.iframeResizer={}))})(this,function(a){"use strict";const u=()=>typeof window<"u",R=()=>window.self!==window.top,b=e=>e instanceof HTMLIFrameElement,E=e=>{window.document.readyState==="complete"?e():window.addEventListener("load",e)},T=(e,t)=>{t(),e.addEventListener("load",t)},M=(e,t)=>{const n=e.contentWindow?.document.readyState==="complete";return e.src!=="about:blank"&&e.contentWindow?.location.href!=="about:blank"&&n?t():e.addEventListener("load",t)},C=()=>({offsetSize:0,checkOrigin:!0,enableLegacyLibSupport:!1}),B=e=>{try{return new URL(e.src).origin===window.location.origin}catch{return!1}},k=e=>{try{const t=new URL(e.src).origin;if(t!=="about:blank")return t}catch{}return null},D=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)}},g=(e,t)=>e?t?e.querySelector(t):e.documentElement:null,z=(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,P=()=>"[iFrameSizer]ID:0:false:false:32:true:true::auto:::0:false:child:auto:true:::true:::false";function W(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 p=$();let m=[];const A=(e,t)=>{if(!u())return[];const n={...C(),...D(e??{})},i=H(t),s=x(n,i);return i.map(r=>{const o={iframe:r,settings:n,interactionState:{isHovered:!1},initContext:{isInitialized:!1,retryAttempts:0}},c=F(o,s);return m.push(o),{unsubscribe:()=>{c(),m=m.filter(d=>d.iframe!==r)}}})};function H(e){return typeof e=="string"?Array.from(document.querySelectorAll(e)).filter(b):e?b(e)?[e]:[]:Array.from(document.getElementsByTagName("iframe"))}function x(e,t){if(Array.isArray(e.checkOrigin))return e.checkOrigin;if(!e.checkOrigin)return[];const n=[];for(const i of t){const s=k(i);s&&n.push(s)}return n}function F(e,t){const n=B(e.iframe)?U(e):N(e,t),i=_(e);return()=>{n(),i()}}function N(e,t){const{iframe:n,initContext:i,settings:{checkOrigin:s,enableLegacyLibSupport:r,targetElementSelector:o,bodyPadding:c,bodyMargin:d}}=e,I=l=>{const J=!s||t.includes(l.origin);if(!(!(n.contentWindow===l.source)||!J)){if(l.data?.type==="iframe-resized"){const{height:f}=l.data;f&&y({newHeight:f,registeredElement:e});return}if(r){const f=W(l);f!==null&&y({newHeight:f,registeredElement:e});return}}};window.addEventListener("message",I);const G=r?P():{type:"iframe-child-init",targetElementSelector:o,bodyPadding:c,bodyMargin:d},S=()=>{T(n,()=>n.contentWindow?.postMessage(G,"*")),i.retryAttempts++,i.retryTimeoutId=window.setTimeout(S,h(i.retryAttempts))};return S(),()=>window.removeEventListener("message",I)}function U(e){const{iframe:t,settings:n}=e,{targetElementSelector:i}=n;let s=0;const r=()=>{const o=g(t.contentDocument,i);if(!t.contentDocument||!o)return s++,setTimeout(r,h(s));z(t.contentDocument,n),p().observe(o)};return M(t,r),()=>{const o=g(t.contentDocument,i);o&&p().unobserve(o),t.removeEventListener("load",r)}}function _({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 $(){let e=null;return()=>{if(!e){const t=({target:n})=>{const i=m.find(({iframe:d})=>d.contentDocument===n.ownerDocument);if(!i)return;const{iframe:s,settings:r}=i,o=g(s.contentDocument,r.targetElementSelector);if(!o)return;const{height:c}=w(o);c&&y({newHeight:c,registeredElement:i})};e=new ResizeObserver(n=>n.forEach(t))}return e}}function y({registeredElement:e,newHeight:t}){const{iframe:n,settings:i,interactionState:s,initContext:r}=e;if(r.isInitialized||(r.isInitialized=!0,clearTimeout(r.retryTimeoutId)),i.onBeforeIframeResize?.({iframe:n,settings:{...i},observedHeight:t})===!1)return;const o=n.getBoundingClientRect(),c=t+i.offsetSize;if(n.style.height=`${c}px`,!i.onIframeResize)return;const d={iframe:n,settings:{...i},interactionState:{...s},previousRenderState:{rect:o},nextRenderState:{rect:n.getBoundingClientRect()}};i.onIframeResize(d)}const q=V();let v=!1;L();function L(){!u()||!R()||window.addEventListener("message",e=>{e.data?.type==="iframe-child-init"&&E(()=>O(e))})}function O(e,t=0){const{targetElementSelector:n,bodyPadding:i,bodyMargin:s}=e.data,r=g(document,n);if(v||window.parent!==e.source)return;if(!r)return setTimeout(()=>O(e,t+1),h(t));z(document,{bodyMargin:s,bodyPadding:i});const o=q();o.disconnect(),o.observe(r),v=!0}function V(){let e=null;return()=>(e||(e=new ResizeObserver(t=>{if(!t[0].target)return;const{height:n,width:i}=w(t[0].target),s={type:"iframe-resized",width:i,height:n};window.parent.postMessage(s,"*")})),e)}const j=({previousRenderState:e,nextRenderState:t,iframe:n})=>{document.activeElement===n&&window.scrollBy(0,t.rect.bottom-e.rect.bottom)};a.initialize=A,a.initializeChildListener=L,a.updateParentScrollOnResize=j,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
|