Google Apps Script

The Google Apps Script platform creates a nested iframe between your app and the page it is host on. This creates a unique challenge for iframe-resizer, as it needs to be able to talk directly with the iframe it is using to calculate the page size from.

This can be overcome by providing iframe-resizer some hints on where it can find the nested iframe, in order to establish communication between the parent page and your GAS App.

Child Page

The first step is to add the following line of code into your GAS app. This will send a message to the parent page when your app loads which contains details of where the iframe is located.

top.postMessage('gasFrame', '*')

You will also need to install the @iframe-resizer/child package to your GAS app.

Parent Page

The parent page needs to wait to receive the above message before starting iframe-resizer. Once it has received the contained references from the GAS app iframe, these can then be passed along to iframe-resizer as follows.

window.addEventListener(
  "message",
  (event) => {
    if (event.data === "gasFrame") {
      iframeResize(
        {
          checkOrigin: event.origin,
          offsetHeight: 19,
          license: "xxxx",
          postMessageTarget: event.source,
        },
        "#myGasIframe"
      );
    }
  },
  false
);

The value for offsetHeight may need to be adjusted based on the content of your GAS app.

For open source projects, iframe-resizer is free to use under the Gnu Public License. To confirm that you are using it in an open-souce project set the license option to GPLv3.

iframeResize({ license: 'GPLv3' })

Once everything is setup, keep an eye on the browser console, as iframe-resizer will warn about any potential issues it detects and provide advice on how to fix them. For more details on using iframe-resizer see the Performance and Trouble Shooting sections of this guide.