Future roadmap

[davidjbradshaw]

Features

v5.1

• Copy Title element value to iframe title attribute
• Add scrollBy() method
• Add waitForLoad option
• Add Parent option to create data-iframe-size attrs via CSS selector (sizeSelector)
• Log when new element is used to calculate size

v5.2

• Investigate if IntersectionObserver can be used to detect which elements are outside the <body/>
• set window.location.hash when setting inPageLinks
• Alias offsetSize -> offset
• Investigate scrolling with sticky headers
  • Anchor scroll to incorrect positioning #794

v5.3

• Optimise performance
• Log init/resize calculation timer
• Remove warning component dependancy in React version
• Isolate parent/child when messages passed via same-domain iframe
• Use setTimeout(0) on user events with void return type
• Check HTMLIFrameElement: sandbox allows JavaScript, when no response from iframe

v5.4

• Use auto-console-group for log output
• ingnoreSelector & data-iframe-ignore
• setOffsetSize()
• log: 'collapsed’ option
• onBeforeResize(newSize)

v5.5

• Direction both
• Adde support for loading=“lazy”
• Detect when iframe is hidden on parent page
• Detect and warn about resize loops
• Detect when an iframe is removed from the page and auto disconnect with warning message
• Detect and ignore elements anchored to the page bottom/right of the page
• Alias onBeforeClose -> onClose
• Alias onAfterClose -> onClosed

v5.x

• Types for core
• Migrate to using pubSub patten
• Add EventListener() methods
  • Add addEventListener() and removeEventListener() methods #710
• Add auto same-domain code injection (@iframe-resizer/injector)
• Create RPC function framework (@iframe-resizer/rpc)

Framework components / plugins

• React
• Vue 3
• Svelte
• SolidJS
• Angular
• jQuery

[b2storefront]

out of curiosity did anyone tried to use that great product to fetch a Shopify page through iframe?

[davidjbradshaw]

out of curiosity did anyone tried to use that great product to fetch a Shopify page through iframe?

Yes I've seen a few people use it with Shopify.

[bertho-zero]

A request–response system would be great too, similar to sendMessage/onMessage but where you wait for a response.
For example somewhere in the parent we would do an const data = await iFrame.request('fn', 'anArg')

[davidjbradshaw]

@bertho-zero I got half way to that in a Stack Overflow answer a while back.

https://stackoverflow.com/questions/78565340/iframe-postmessage-alternatives-existing-eg-bind-functions-to-iframe/

[bertho-zero]

I was thinking of something like this that allows replying asynchronously and using async/await. I’m using something similar, but a native system to call parent <-> child functions and wait for the responses could help.

It’s just about making better use of the current messaging system for asynchronous behavior; the limitations related to data formatting remain the same.

Child:

async function handleRequest({ action, payload }) {
  switch (action) {
    case 'anOperation':
      return { aKey: 'value' };
    default:
      throw new Error('Unknown action: ' + action);
  }
}

function onMessage(message) {
  if (message?.type === 'request') {
    handleRequest(message)
      .then(
        (result) => {
          if ('parentIFrame' in window) {
            window.parentIFrame.sendMessage({
              type: 'response',
              id: message.id,
              result,
            });
          }
        },
        (err) => {
          if ('parentIFrame' in window) {
            window.parentIFrame.sendMessage({
              type: 'response',
              id: message.id,
              error: String(err),
            });
          }
        },
      );
  }
};

Parent

// on each iframe

const pendingRequests = new Map();
iframe.iFrameResizer.pendingRequests = pendingRequests;
iframe.iFrameResizer.callChild = function callChild(action, payload = {}) {
  return new Promise((resolve, reject) => {
    const id = crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);

    pendingRequests.set(id, { resolve, reject });
    iframe.iFrameResizer.sendMessage({ type: 'request', id, action, payload });
  });
};;


// in the `onMessage` function

const { pendingRequests } = iframe.iFrameResizer;

if (message.type === 'response' && pendingRequests?.has(message.id)) {
  const { resolve, reject } = pendingRequests.get(message.id);
  pendingRequests.delete(message.id);
  if (message.error) {
    reject(message.error);
  } else {
    resolve(message.result);
  }
}


// call example:

const result = await iframe.iFrameResizer.callChild('anOperation', {
  uid: 123456,
});

Here’s the ChatGPT conversation that inspired me, it works perfectly.

---

You:

With iframe-resizer, how can I call an asynchronous function and wait for its response?

ChatGPT:

Thought for 29 seconds

Here’s a request/response pattern with Promises for iframe-resizer. The idea: tag each request with an id, listen to onMessage, and resolve the Promise when the matching response returns.

Parent side (page that contains the <iframe>)

<script src="iframeResizer.min.js"></script>
<iframe id="child" src="..."></iframe>
<script>
  const iframe = document.getElementById('child');
  const pending = new Map();

  // Init + listen for messages from the child
  iFrameResize({
    checkOrigin: true,
    onMessage({ iframe, message }) {
      if (message?.type === 'response' && pending.has(message.id)) {
        const { resolve } = pending.get(message.id);
        pending.delete(message.id);
        resolve(message.result);
      }
    }
  }, iframe);

  // Call the child and wait for the response
  function callChild(action, payload, { timeout = 8000, targetOrigin = '*' } = {}) {
    return new Promise((resolve, reject) => {
      const id = crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
      const timer = setTimeout(() => {
        pending.delete(id);
        reject(new Error('Timeout'));
      }, timeout);

      pending.set(id, { resolve, reject, timer });
      iframe.iFrameResizer.sendMessage({ type: 'request', id, action, payload }, targetOrigin);
    });
  }

  // Example usage
  // const data = await callChild('computeTotal', { items: [1,2,3] });
</script>

API refs: onMessage (parent) and sendMessage on the parent side. iframe-resizer

Iframe side (embedded page)

<script src="iframeResizer.contentWindow.min.js"></script>
<script>
  // Declare the message handler in the iframe via window.iFrameResizer
  window.iFrameResizer = {
    // The parent will send {type:'request', id, action, payload}
    onMessage(message) {
      if (message?.type === 'request') {
        handleRequest(message).catch(err => {
          parentIframe.sendMessage({ type: 'response', id: message.id, error: String(err) });
        });
      }
    },
    onReady() {
      // here if needed: parentIframe.sendMessage({ type:'ready' })
    }
  };

  async function handleRequest({ id, action, payload }) {
    let result;
    switch (action) {
      case 'computeTotal':
        result = await computeTotal(payload);
        break;
      // other actions...
      default:
        throw new Error('Unknown action: ' + action);
    }
    parentIframe.sendMessage({ type: 'response', id, result });
  }

  async function computeTotal({ items }) {
    await new Promise(r => setTimeout(r, 200)); // simulate async
    return items.reduce((a, b) => a + b, 0);
  }
</script>

API refs: onMessage (child via window.iFrameResizer) and parentIframe.sendMessage. iframe-resizer

---

Key points

• No native await on sendMessage: you roll your own Promise with a correlation id and onMessage. iframe-resizer+1

• Security: set checkOrigin: true on the parent and, on the iframe side, use the targetOrigin option when possible. iframe-resizer+1

• Initialization: wait for the iframe to be initialized (onReady in the iframe) before sending heavy requests. iframe-resizer

If you want the reverse (the iframe calls a function in the parent and waits), apply the same pattern: a pending map in the iframe, parentIframe.sendMessage({...}), and onMessage in the parent that sends a response with the same id.