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,
          offsetSize: 19,
          license: "xxxx",
          postMessageTarget: event.source,
          waitForLoad: true,
        },
        "#myGasIframe"
      );
    }
  },
  false
);

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

The waitForLoad option defers sending a message to the iframe until after the onload event fires on the iframe. If their is any possibility that the iframe content could load before the JavaScript runs, then you should set this option to false.

For non-comercial open source projects, iframe-resizer is free to use under the Gnu Public License. To confirm that you are using it in a compatable project set the license 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 Advanced Setup and Trouble Shooting sections of this guide.