CHANGE so frames for channel are filtered to only "ready" frames & flush events when frame loaded in after & on connect flush targets local/main frame

lib/channel-postmessage/src/index.ts

@@ -45,7 +45,7 @@ export class PostmsgTransport {
     this.handler = (...args) => {
       handler.apply(this, args);
 
-      if (!this.connected && this.getFrames().length) {
+      if (!this.connected && this.getLocalFrame().length) {
         this.flush();
         this.connected = true;
       }
@@ -79,6 +79,15 @@ export class PostmsgTransport {
       { maxDepth: depth, allowFunction }
     );
 
+    if (!frames.length) {
+      return new Promise((resolve, reject) => {
+        this.buffer.push({ event, resolve, reject });
+      });
+    }
+    if (frames.length && this.buffer.length) {
+      this.flush();
+    }
+
     frames.forEach(f => {
       try {
         f.postMessage(data, '*');
@@ -87,12 +96,6 @@ export class PostmsgTransport {
       }
     });
 
-    if (!frames.length || this.buffer.length) {
-      return new Promise((resolve, reject) => {
-        this.buffer.push({ event, resolve, reject });
-      });
-    }
-
     return Promise.resolve(null);
   }
 
@@ -109,7 +112,7 @@ export class PostmsgTransport {
   private getFrames(target?: string): Window[] {
     if (this.config.page === 'manager') {
       const nodes: HTMLIFrameElement[] = [
-        ...document.querySelectorAll('iframe[data-is-storybook]'),
+        ...document.querySelectorAll('iframe[data-is-storybook][data-is-loaded]'),
       ];
 
       const list = nodes
@@ -145,6 +148,18 @@ export class PostmsgTransport {
     return [];
   }
 
+  private getLocalFrame(): Window[] {
+    if (this.config.page === 'manager') {
+      const list: HTMLIFrameElement[] = [...document.querySelectorAll('#storybook-preview-iframe')];
+      return list.map(e => e.contentWindow);
+    }
+    if (window && window.parent) {
+      return [window.parent];
+    }
+
+    return [];
+  }
+
   private handleEvent(rawEvent: MessageEvent): void {
     try {
       const { data } = rawEvent;

lib/ui/src/components/preview/iframe.tsx

@@ -81,6 +81,7 @@ export class IFrame extends Component<IFrameProps & IframeHTMLAttributes<HTMLIFr
     const { id, title, src, allowFullScreen, scale, active, ...rest } = this.props;
     return (
       <StyledIframe
+        onLoad={() => this.iframe.setAttribute('data-is-loaded', 'true')}
         data-is-storybook={active ? 'true' : 'false'}
         scrolling="yes"
         id={id}