@open-iframe-resizer/core 1.6.1 → 2.0.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/README.md +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +100 -88
- package/dist/index.umd.cjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -17,7 +17,7 @@ If you found this project helpful, please consider starring the repository!
|
|
|
17
17
|
```html
|
|
18
18
|
|
|
19
19
|
<script type="module">
|
|
20
|
-
import { initialize } from "https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@
|
|
20
|
+
import { initialize } from "https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@v2.0.0/dist/index.min.js";
|
|
21
21
|
|
|
22
22
|
initialize({}, "#my-iframe");
|
|
23
23
|
</script>
|
package/dist/index.d.ts
CHANGED
|
@@ -27,9 +27,9 @@ export declare function initializeChildListener(): void;
|
|
|
27
27
|
* Automatically resize the selected iframes when their inner content grows.
|
|
28
28
|
* @param settings The settings for the selected iframes. The default settings properties are picked if empty.
|
|
29
29
|
* @param selector The selector for the iframe(s) or the HTMLIFrameElement to be resized. If empty, all document iframe elements will be selected.
|
|
30
|
-
* @returns A result array, which can be used to clean up the listeners if you
|
|
30
|
+
* @returns A result array Promise, which can be used to clean up the listeners if you remove iframes from the document and want to clean all associated listeners.
|
|
31
31
|
*/
|
|
32
|
-
export declare type InitializeFunction = (settings?: Partial<Settings>, selector?: string | HTMLIFrameElement) => InitializeResult[]
|
|
32
|
+
export declare type InitializeFunction = (settings?: Partial<Settings>, selector?: string | HTMLIFrameElement) => Promise<InitializeResult[]>;
|
|
33
33
|
|
|
34
34
|
export declare type InitializeResult = { unsubscribe: () => void };
|
|
35
35
|
|
package/dist/index.js
CHANGED
|
@@ -1,17 +1,27 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
const z = () => typeof window < "u", R = () => {
|
|
2
|
+
try {
|
|
3
|
+
return window.self !== window.top;
|
|
4
|
+
} catch {
|
|
5
|
+
return !0;
|
|
6
|
+
}
|
|
7
|
+
}, b = (e) => e instanceof HTMLIFrameElement, M = (e) => {
|
|
8
|
+
window.document.readyState === "complete" ? e() : window.addEventListener("load", e, { once: !0 });
|
|
5
9
|
}, T = (e, t) => {
|
|
10
|
+
t(), e.addEventListener("load", t, { once: !0 });
|
|
11
|
+
}, C = (e, t) => {
|
|
6
12
|
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
|
-
},
|
|
13
|
+
return e.src !== "about:blank" && e.contentWindow?.location.href !== "about:blank" && n ? t() : e.addEventListener("load", t, { once: !0 });
|
|
14
|
+
}, D = () => ({ offsetSize: 0, checkOrigin: !0, enableLegacyLibSupport: !1 });
|
|
15
|
+
async function k(e) {
|
|
9
16
|
try {
|
|
10
|
-
return new
|
|
17
|
+
return e.contentDocument?.URL === "about:blank" ? new Promise((n) => {
|
|
18
|
+
e.addEventListener("load", () => n(e.contentDocument !== null), { once: !0 });
|
|
19
|
+
}) : e.contentDocument !== null;
|
|
11
20
|
} catch {
|
|
12
21
|
return !1;
|
|
13
22
|
}
|
|
14
|
-
}
|
|
23
|
+
}
|
|
24
|
+
const B = (e) => {
|
|
15
25
|
try {
|
|
16
26
|
const t = new URL(e.src).origin;
|
|
17
27
|
if (t !== "about:blank")
|
|
@@ -19,7 +29,7 @@ const v = () => typeof window < "u", S = () => window.self !== window.top, y = (
|
|
|
19
29
|
} catch {
|
|
20
30
|
}
|
|
21
31
|
return null;
|
|
22
|
-
},
|
|
32
|
+
}, P = (e) => (Object.keys(e).forEach((t) => {
|
|
23
33
|
e[t] === void 0 && delete e[t];
|
|
24
34
|
}), e), p = (e) => {
|
|
25
35
|
const { height: t, width: n } = e.getBoundingClientRect();
|
|
@@ -33,88 +43,90 @@ function A(e) {
|
|
|
33
43
|
const [t, n] = e.data.split(":"), i = +n;
|
|
34
44
|
return i > 0 ? i : null;
|
|
35
45
|
}
|
|
36
|
-
const
|
|
46
|
+
const w = q();
|
|
37
47
|
let l = [];
|
|
38
|
-
const
|
|
39
|
-
if (!
|
|
48
|
+
const K = async (e, t) => {
|
|
49
|
+
if (!z())
|
|
40
50
|
return [];
|
|
41
|
-
const n = { ...
|
|
42
|
-
return
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
51
|
+
const n = { ...D(), ...P(e ?? {}) }, i = H(t), r = x(n, i);
|
|
52
|
+
return Promise.all(
|
|
53
|
+
i.map(async (o) => {
|
|
54
|
+
const s = {
|
|
55
|
+
iframe: o,
|
|
56
|
+
settings: n,
|
|
57
|
+
interactionState: { isHovered: !1 },
|
|
58
|
+
initContext: { isInitialized: !1, retryAttempts: 0 }
|
|
59
|
+
}, a = await F(s, r);
|
|
60
|
+
return l.push(s), {
|
|
61
|
+
unsubscribe: () => {
|
|
62
|
+
a(), l = l.filter((c) => c.iframe !== o);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
})
|
|
66
|
+
);
|
|
55
67
|
};
|
|
56
68
|
function H(e) {
|
|
57
|
-
return typeof e == "string" ? Array.from(document.querySelectorAll(e)).filter(
|
|
69
|
+
return typeof e == "string" ? Array.from(document.querySelectorAll(e)).filter(b) : e ? b(e) ? [e] : [] : Array.from(document.getElementsByTagName("iframe"));
|
|
58
70
|
}
|
|
59
|
-
function
|
|
71
|
+
function x(e, t) {
|
|
60
72
|
if (Array.isArray(e.checkOrigin))
|
|
61
73
|
return e.checkOrigin;
|
|
62
74
|
if (!e.checkOrigin)
|
|
63
75
|
return [];
|
|
64
76
|
const n = [];
|
|
65
77
|
for (const i of t) {
|
|
66
|
-
const
|
|
67
|
-
|
|
78
|
+
const r = B(i);
|
|
79
|
+
r && n.push(r);
|
|
68
80
|
}
|
|
69
81
|
return n;
|
|
70
82
|
}
|
|
71
|
-
function
|
|
72
|
-
const
|
|
83
|
+
async function F(e, t) {
|
|
84
|
+
const i = await k(e.iframe) ? U(e) : N(e, t), r = $(e);
|
|
73
85
|
return () => {
|
|
74
|
-
|
|
86
|
+
i(), r();
|
|
75
87
|
};
|
|
76
88
|
}
|
|
77
|
-
function
|
|
89
|
+
function N(e, t) {
|
|
78
90
|
const {
|
|
79
91
|
iframe: n,
|
|
80
92
|
initContext: i,
|
|
81
|
-
settings: { checkOrigin:
|
|
82
|
-
} = e, h = (
|
|
83
|
-
const
|
|
84
|
-
if (!(!(n.contentWindow ===
|
|
85
|
-
if (
|
|
86
|
-
const { height:
|
|
87
|
-
|
|
93
|
+
settings: { checkOrigin: r, enableLegacyLibSupport: o, targetElementSelector: s, bodyPadding: a, bodyMargin: c }
|
|
94
|
+
} = e, h = (u) => {
|
|
95
|
+
const S = u.origin === "null", E = !r || S || t.includes(u.origin);
|
|
96
|
+
if (!(!(n.contentWindow === u.source) || !E)) {
|
|
97
|
+
if (u.data?.type === "iframe-resized") {
|
|
98
|
+
const { height: d } = u.data;
|
|
99
|
+
d && g({ newHeight: d, registeredElement: e });
|
|
88
100
|
return;
|
|
89
101
|
}
|
|
90
|
-
if (
|
|
91
|
-
const
|
|
92
|
-
|
|
102
|
+
if (o) {
|
|
103
|
+
const d = A(u);
|
|
104
|
+
d !== null && g({ newHeight: d, registeredElement: e });
|
|
93
105
|
return;
|
|
94
106
|
}
|
|
95
107
|
}
|
|
96
108
|
};
|
|
97
109
|
window.addEventListener("message", h);
|
|
98
|
-
const
|
|
99
|
-
|
|
110
|
+
const I = o ? W() : { type: "iframe-child-init", targetElementSelector: s, bodyPadding: a, bodyMargin: c }, y = () => {
|
|
111
|
+
T(n, () => n.contentWindow?.postMessage(I, "*")), i.retryAttempts++, i.retryTimeoutId = window.setTimeout(y, m(i.retryAttempts));
|
|
100
112
|
};
|
|
101
|
-
return
|
|
113
|
+
return y(), () => window.removeEventListener("message", h);
|
|
102
114
|
}
|
|
103
|
-
function
|
|
115
|
+
function U(e) {
|
|
104
116
|
const { iframe: t, settings: n } = e, { targetElementSelector: i } = n;
|
|
105
|
-
let
|
|
106
|
-
const
|
|
107
|
-
const
|
|
108
|
-
if (!t.contentDocument || !
|
|
109
|
-
return
|
|
110
|
-
L(t.contentDocument, n),
|
|
117
|
+
let r = 0;
|
|
118
|
+
const o = () => {
|
|
119
|
+
const s = f(t.contentDocument, i);
|
|
120
|
+
if (!t.contentDocument || !s)
|
|
121
|
+
return r++, setTimeout(o, m(r));
|
|
122
|
+
L(t.contentDocument, n), w().observe(s);
|
|
111
123
|
};
|
|
112
|
-
return
|
|
113
|
-
const
|
|
114
|
-
|
|
124
|
+
return C(t, o), () => {
|
|
125
|
+
const s = f(t.contentDocument, i);
|
|
126
|
+
s && w().unobserve(s), t.removeEventListener("load", o);
|
|
115
127
|
};
|
|
116
128
|
}
|
|
117
|
-
function
|
|
129
|
+
function $({ iframe: e, interactionState: t }) {
|
|
118
130
|
const n = () => {
|
|
119
131
|
t.isHovered = !0;
|
|
120
132
|
}, i = () => {
|
|
@@ -124,7 +136,7 @@ function U({ iframe: e, interactionState: t }) {
|
|
|
124
136
|
e.removeEventListener("mouseenter", n), e.removeEventListener("mouseleave", i);
|
|
125
137
|
};
|
|
126
138
|
}
|
|
127
|
-
function
|
|
139
|
+
function q() {
|
|
128
140
|
let e = null;
|
|
129
141
|
return () => {
|
|
130
142
|
if (!e) {
|
|
@@ -132,10 +144,10 @@ function _() {
|
|
|
132
144
|
const i = l.find(({ iframe: c }) => c.contentDocument === n.ownerDocument);
|
|
133
145
|
if (!i)
|
|
134
146
|
return;
|
|
135
|
-
const { iframe:
|
|
136
|
-
if (!
|
|
147
|
+
const { iframe: r, settings: o } = i, s = f(r.contentDocument, o.targetElementSelector);
|
|
148
|
+
if (!s)
|
|
137
149
|
return;
|
|
138
|
-
const { height: a } = p(
|
|
150
|
+
const { height: a } = p(s);
|
|
139
151
|
a && g({ newHeight: a, registeredElement: i });
|
|
140
152
|
};
|
|
141
153
|
e = new ResizeObserver((n) => n.forEach(t));
|
|
@@ -144,57 +156,57 @@ function _() {
|
|
|
144
156
|
};
|
|
145
157
|
}
|
|
146
158
|
function g({ registeredElement: e, newHeight: t }) {
|
|
147
|
-
const { iframe: n, settings: i, interactionState:
|
|
148
|
-
if (
|
|
159
|
+
const { iframe: n, settings: i, interactionState: r, initContext: o } = e;
|
|
160
|
+
if (o.isInitialized || (o.isInitialized = !0, clearTimeout(o.retryTimeoutId)), i.onBeforeIframeResize?.({ iframe: n, settings: { ...i }, observedHeight: t }) === !1)
|
|
149
161
|
return;
|
|
150
|
-
const
|
|
162
|
+
const s = n.getBoundingClientRect(), a = t + i.offsetSize;
|
|
151
163
|
if (n.style.height = `${a}px`, !i.onIframeResize)
|
|
152
164
|
return;
|
|
153
165
|
const c = {
|
|
154
166
|
iframe: n,
|
|
155
167
|
settings: { ...i },
|
|
156
|
-
interactionState: { ...
|
|
157
|
-
previousRenderState: { rect:
|
|
168
|
+
interactionState: { ...r },
|
|
169
|
+
previousRenderState: { rect: s },
|
|
158
170
|
nextRenderState: { rect: n.getBoundingClientRect() }
|
|
159
171
|
};
|
|
160
172
|
i.onIframeResize(c);
|
|
161
173
|
}
|
|
162
|
-
const
|
|
163
|
-
let
|
|
164
|
-
|
|
165
|
-
function
|
|
166
|
-
!
|
|
167
|
-
e.data?.type === "iframe-child-init" &&
|
|
174
|
+
const _ = G();
|
|
175
|
+
let v = !1;
|
|
176
|
+
V();
|
|
177
|
+
function V() {
|
|
178
|
+
!z() || !R() || window.addEventListener("message", (e) => {
|
|
179
|
+
e.data?.type === "iframe-child-init" && M(() => O(e));
|
|
168
180
|
});
|
|
169
181
|
}
|
|
170
|
-
function
|
|
171
|
-
const { targetElementSelector: n, bodyPadding: i, bodyMargin:
|
|
172
|
-
if (
|
|
182
|
+
function O(e, t = 0) {
|
|
183
|
+
const { targetElementSelector: n, bodyPadding: i, bodyMargin: r } = e.data, o = f(document, n);
|
|
184
|
+
if (v || window.parent !== e.source)
|
|
173
185
|
return;
|
|
174
|
-
if (!
|
|
175
|
-
return setTimeout(() =>
|
|
176
|
-
L(document, { bodyMargin:
|
|
177
|
-
const
|
|
178
|
-
|
|
186
|
+
if (!o)
|
|
187
|
+
return setTimeout(() => O(e, t + 1), m(t));
|
|
188
|
+
L(document, { bodyMargin: r, bodyPadding: i });
|
|
189
|
+
const s = _();
|
|
190
|
+
s.disconnect(), s.observe(o), v = !0;
|
|
179
191
|
}
|
|
180
|
-
function
|
|
192
|
+
function G() {
|
|
181
193
|
let e = null;
|
|
182
194
|
return () => (e || (e = new ResizeObserver((t) => {
|
|
183
195
|
if (!t[0].target)
|
|
184
196
|
return;
|
|
185
|
-
const { height: n, width: i } = p(t[0].target),
|
|
197
|
+
const { height: n, width: i } = p(t[0].target), r = {
|
|
186
198
|
type: "iframe-resized",
|
|
187
199
|
width: i,
|
|
188
200
|
height: n
|
|
189
201
|
};
|
|
190
|
-
window.parent.postMessage(
|
|
202
|
+
window.parent.postMessage(r, "*");
|
|
191
203
|
})), e);
|
|
192
204
|
}
|
|
193
|
-
const
|
|
205
|
+
const Q = ({ previousRenderState: e, nextRenderState: t, iframe: n }) => {
|
|
194
206
|
document.activeElement === n && window.scrollBy(0, t.rect.bottom - e.rect.bottom);
|
|
195
207
|
};
|
|
196
208
|
export {
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
209
|
+
K as initialize,
|
|
210
|
+
V as initializeChildListener,
|
|
211
|
+
Q as updateParentScrollOnResize
|
|
200
212
|
};
|
package/dist/index.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
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})
|
|
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=()=>{try{return window.self!==window.top}catch{return!0}},b=e=>e instanceof HTMLIFrameElement,E=e=>{window.document.readyState==="complete"?e():window.addEventListener("load",e,{once:!0})},T=(e,t)=>{t(),e.addEventListener("load",t,{once:!0})},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,{once:!0})},C=()=>({offsetSize:0,checkOrigin:!0,enableLegacyLibSupport:!1});async function D(e){try{return e.contentDocument?.URL==="about:blank"?new Promise(n=>{e.addEventListener("load",()=>n(e.contentDocument!==null),{once:!0})}):e.contentDocument!==null}catch{return!1}}const k=e=>{try{const t=new URL(e.src).origin;if(t!=="about:blank")return t}catch{}return null},B=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=q();let m=[];const A=async(e,t)=>{if(!u())return[];const n={...C(),...B(e??{})},i=H(t),r=x(n,i);return Promise.all(i.map(async o=>{const s={iframe:o,settings:n,interactionState:{isHovered:!1},initContext:{isInitialized:!1,retryAttempts:0}},c=await F(s,r);return m.push(s),{unsubscribe:()=>{c(),m=m.filter(d=>d.iframe!==o)}}}))};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 r=k(i);r&&n.push(r)}return n}async function F(e,t){const i=await D(e.iframe)?U(e):N(e,t),r=$(e);return()=>{i(),r()}}function N(e,t){const{iframe:n,initContext:i,settings:{checkOrigin:r,enableLegacyLibSupport:o,targetElementSelector:s,bodyPadding:c,bodyMargin:d}}=e,I=l=>{const J=l.origin==="null",K=!r||J||t.includes(l.origin);if(!(!(n.contentWindow===l.source)||!K)){if(l.data?.type==="iframe-resized"){const{height:f}=l.data;f&&y({newHeight:f,registeredElement:e});return}if(o){const f=W(l);f!==null&&y({newHeight:f,registeredElement:e});return}}};window.addEventListener("message",I);const G=o?P():{type:"iframe-child-init",targetElementSelector:s,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 r=0;const o=()=>{const s=g(t.contentDocument,i);if(!t.contentDocument||!s)return r++,setTimeout(o,h(r));z(t.contentDocument,n),p().observe(s)};return M(t,o),()=>{const s=g(t.contentDocument,i);s&&p().unobserve(s),t.removeEventListener("load",o)}}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 q(){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:r,settings:o}=i,s=g(r.contentDocument,o.targetElementSelector);if(!s)return;const{height:c}=w(s);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:r,initContext:o}=e;if(o.isInitialized||(o.isInitialized=!0,clearTimeout(o.retryTimeoutId)),i.onBeforeIframeResize?.({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 d={iframe:n,settings:{...i},interactionState:{...r},previousRenderState:{rect:s},nextRenderState:{rect:n.getBoundingClientRect()}};i.onIframeResize(d)}const _=V();let v=!1;O();function O(){!u()||!R()||window.addEventListener("message",e=>{e.data?.type==="iframe-child-init"&&E(()=>L(e))})}function L(e,t=0){const{targetElementSelector:n,bodyPadding:i,bodyMargin:r}=e.data,o=g(document,n);if(v||window.parent!==e.source)return;if(!o)return setTimeout(()=>L(e,t+1),h(t));z(document,{bodyMargin:r,bodyPadding:i});const s=_();s.disconnect(),s.observe(o),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),r={type:"iframe-resized",width:i,height:n};window.parent.postMessage(r,"*")})),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=O,a.updateParentScrollOnResize=j,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
|