duongphuhiep/How to perform Request Reply communication between Iframe & Host.md

Problem

Your HTML page (the host page) has an Iframe. The Iframe source is on other domain, so you will have to use the window.postMessage() for cross-origin communication. But this communication is only in 1 direction (The Iframe can inform the Host or the Host can inform the Iframe)

This article shows you how to make the Request/Reply communication using postMessage() and MessageChannel combination.

The article did not show you how to add a timeout to the communication, so the Iframe might wait forever if the Host did not response.

I will resume the technique by some codes snippets and at the same time add the missing timeout implementation.

Codes snippets

In this example:

the Iframe want to ask the Host a IframeConfig object,
the Iframe open a new MessageChannel to post a IframeConfigRequest object to the Host.
when the Host received this IframeConfigRequest, it will reply the IframeConfig object on the MessageChannel
we want the Promise to be terminated in timeout if the host did not response, so we make it race with a "timeout" promise. => what ever terminate first will solve the promise.

Iframe codes

function requestIframeConfig(uuid: string): Promise<IframeConfig> {
    const mainPromise = new Promise<IframeConfig>((res, rej) => {
        const channel = new MessageChannel();

        //setup listener to the response
        channel.port1.onmessage = ({ data }) => {
            channel.port1.close();
            const response = data as IframeConfig|Error
            if (response instanceof Error) {
                rej(response);
            }
            else if (!response.type) {
                rej(new Error(`Unable to get IframeConfig from the sdk. Invalid response: missing type`))
            }
            else {
                res(response);
            }
        };

        //send the request
        const request: IframeConfigRequest = {
            type: MessageType.IframeConfigRequest,
            uuid
        }

        parent.postMessage(request, "*", [channel.port2])
    });

    return Promise.race([
        mainPromise,
        new Promise<IframeConfig>((_, reject) =>
            setTimeout(() => reject(new Error('Timeout: Unable to get IframeConfig from the sdk within 10 seconds')), 10000)
        )
    ]);
}

Host codes

let iframeConfig: IframeConfig;

window.addEventListener(
    "message",
    function (event: MessageEvent<IframeConfigRequest>) {
      if (event.data.type != MessageType.IframeConfigRequest) return; //received non-concerned event
      //response to the iframe
      event.ports[0].postMessage(iframeConfig);
    }
  );

jpc-ae · 2024-12-25T21:07:22Z

You can change

            setTimeout(
                () =>
                    reject(
                        new Error(
                            `Timeout: Unable to get response within ${timeoutMs} ms`
                        )
                    ),
                timeoutMs
            )

to

            setTimeout(
                reject,
                timeoutMs,
                new Error(
                    `Timeout: Unable to get response within ${timeoutMs} ms`
                )
            )

since reject is already a function, and the setTimeout function passes any arguments after timeoutMs to whatever function is marked. setTimeout is funny that way. Also, is there a reason you use res/rej in the first promise, but reject in the timeout one? It's usually nice to stay consistent (I'm partial to keeping the full names). Outside of that, nice reference.

duongphuhiep/How to perform Request Reply communication between Iframe & Host.md

Select an option

No results found