diff --git a/ghost/admin/app/components/gh-site-iframe.hbs b/ghost/admin/app/components/gh-site-iframe.hbs
index c845266a41..ecb5915eac 100644
--- a/ghost/admin/app/components/gh-site-iframe.hbs
+++ b/ghost/admin/app/components/gh-site-iframe.hbs
@@ -3,6 +3,7 @@
     src={{this.srcUrl}}
     frameborder="0"
     allowtransparency="true"
+    {{did-insert this.attachMessageListener}}
     {{did-update this.resetSrcAttribute @guid}}
     {{on "load" this.onLoad}}
     ...attributes
diff --git a/ghost/admin/app/components/gh-site-iframe.js b/ghost/admin/app/components/gh-site-iframe.js
index 7f3a7e384a..cf539b3aed 100644
--- a/ghost/admin/app/components/gh-site-iframe.js
+++ b/ghost/admin/app/components/gh-site-iframe.js
@@ -11,6 +11,9 @@ export default class GhSiteIframeComponent extends Component {
     @tracked isInvisible = this.args.invisibleUntilLoaded;
 
     willDestroy() {
+        if (this.messageListener) {
+            window.removeEventListener('message', this.messageListener);
+        }
         this.args.onDestroyed?.();
     }
 
@@ -40,12 +43,30 @@ export default class GhSiteIframeComponent extends Component {
 
     @action
     onLoad(event) {
-        if (this.args.invisibleUntilLoaded) {
+        if (this.args.invisibleUntilLoaded && typeof this.args.invisibleUntilLoaded === 'boolean') {
             this.makeVisible.perform();
         }
         this.args.onLoad?.(event);
     }
 
+    @action
+    attachMessageListener() {
+        if (typeof this.args.invisibleUntilLoaded === 'string') {
+            this.messageListener = (event) => {
+                const srcURL = new URL(this.srcUrl);
+                const originURL = new URL(event.origin);
+
+                if (originURL.origin === srcURL.origin) {
+                    if (event.data === this.args.invisibleUntilLoaded) {
+                        this.makeVisible.perform();
+                    }
+                }
+            };
+
+            window.addEventListener('message', this.messageListener, true);
+        }
+    }
+
     @task
     *makeVisible() {
         // give any scripts a bit of time to render before making visible
diff --git a/ghost/admin/app/components/modal-portal-settings.hbs b/ghost/admin/app/components/modal-portal-settings.hbs
index ee39d38872..b69f6c3a2d 100644
--- a/ghost/admin/app/components/modal-portal-settings.hbs
+++ b/ghost/admin/app/components/modal-portal-settings.hbs
@@ -248,7 +248,7 @@
                     class="gh-portal-siteiframe"
                     @src={{this.portalPreviewUrl}}
                     @guid={{this.portalPreviewGuid}}
-                    @invisibleUntilLoaded={{true}} />
+                    @invisibleUntilLoaded="portal-ready" />
             </div>
 
         </div>
diff --git a/ghost/admin/app/templates/settings/membership.hbs b/ghost/admin/app/templates/settings/membership.hbs
index 8952aadf3d..70eb60e895 100644
--- a/ghost/admin/app/templates/settings/membership.hbs
+++ b/ghost/admin/app/templates/settings/membership.hbs
@@ -58,7 +58,7 @@
                         <GhSiteIframe
                             @src={{this.portalPreviewUrl}}
                             @guid={{this.portalPreviewGuid}}
-                            @invisibleUntilLoaded={{true}}
+                            @invisibleUntilLoaded="portal-ready"
                             @onLoad={{this.portalPreviewLoaded}}
                             @onDestroyed={{this.portalPreviewDestroyed}} />
                     {{/if}}