diff --git a/lib/modal/src/component/index.ts b/lib/modal/src/component/index.ts index 88f90275b0..ce3fb0b54a 100644 --- a/lib/modal/src/component/index.ts +++ b/lib/modal/src/component/index.ts @@ -1 +1,2 @@ export * from './modal-dialog'; +export * from './modal-iframe-content'; diff --git a/lib/modal/src/component/modal-iframe-content.tsx b/lib/modal/src/component/modal-iframe-content.tsx index 17ab34ccf8..168d95373f 100644 --- a/lib/modal/src/component/modal-iframe-content.tsx +++ b/lib/modal/src/component/modal-iframe-content.tsx @@ -3,6 +3,7 @@ import {Component, createRef} from 'preact'; export type ModalIframeContentProps = { url: string; watchHeight?: boolean; + iframeBodyClass?: string; }; export type ModalIframeContentState = { @@ -20,6 +21,10 @@ export class ModalIframeContent extends Component { state: ModalIframeContentState = {}; + get iframeDoc() { + return this._ref.current?.contentWindow?.document; + } + componentDidMount() { if (this.props.watchHeight) { this._watchIframeHeight(); @@ -30,12 +35,11 @@ export class ModalIframeContent extends Component { this._rob?.disconnect(); } - _watchIframeHeight = () => { - const iframeDoc = this._ref.current?.contentWindow?.document; + _watchIframeHeight() { + const iframeDoc = this.iframeDoc; if (!iframeDoc) { return; } - let rob = this._rob; rob?.disconnect(); rob = new ResizeObserver(() => { @@ -47,17 +51,33 @@ export class ModalIframeContent extends Component { rob.observe(iframeDoc.body); rob.observe(iframeDoc.documentElement); this._rob = rob; + } + + _handleIframeLoad = () => { + const iframeDoc = this.iframeDoc; + if (!iframeDoc) { + return; + } + + const {iframeBodyClass, watchHeight} = this.props; + + if (watchHeight) { + this._watchIframeHeight(); + } + + if (iframeBodyClass) { + iframeDoc.body.classList.add(iframeBodyClass); + } }; render() { - const {url, watchHeight} = this.props; return (