Resize an iFrame - A simple solution

Using iFrameResizer library in OutSystems

Have you ever been tasked with something that seemed simple at first, but turned out to be more complex than expected? In this article, I want to share a story about a recent project that involved embedding a cross-origin page within an iFrame, and the challenge of resizing the iFrame to fit its content. Read on to learn how we overcame this challenge using the iFrameResizer library in OutSystems.

The challenge:

We needed to embed a cross-origin page within an iFrame. It would need to fit between the header and footer, adjusting automatically the height to its content. It would also need to be responsive, adapting both to screen resizes and changes within the nested page content height.

The extra challenge:

The same-origin policy is a critical security mechanism that restricts how a document or script loaded by one origin can interact with a resource from another origin. Since we had a nested page from a different origin, we would need to find a solution compliant with it.

Note: You can read more about same-origin policy and the associated challenges here: MDN Web Docs — Same-origin policy

The solution:

iFrame Resizer — This library enables the automatic resizing of the height and width of both same and cross-origin iFrames to fit their contained content. It provides a range of features to address the most common issues while using iFrames.

It will provide you a wide range of options, methods and events that will certainly make your life easier when dealing with iFrames. You can check them here:

Parent Page API — Options, Events, Methods

Child Page API — Options, Events, Methods

How we did it?

1. We loaded a script in the page nested within the iFrame. In our case, since that page was provided by a third-party, we requested them to add it. Quoting the official documentation “This file is designed to be a guest on someone else’s system, so has no dependencies and won’t do anything until it’s activated by a message from the containing page.”

2. We loaded a second script on the page hosting the iFrame. In the example below its possible to see the script being set as required in the screen that will contain the iFrame.

3. We added a class to the iFrame, this facilitated the element selection both on the CSS and the iFrameResizer initialization.

4. We added the suggested CSS to the iFrame.

.iframe-oracle-content {
   width: 1px;
   min-width: 100%;
}

5. We initiated the iFrameResizer. For that we’ve used the iFrame’s wrapper block’s OnReady event. Here you’ll be able to define a few options, depending on your needs. (See options)

Important note: Don’t use the iFrame’s widget id as selector when initializing. Due to the way OutSystems manages the element’s ids, (i.e. they are generated, and therefore subject to change between compilations) it won’t work properly.

And that’s all it takes to get your iFrame working seamlessly — easy, right?

And how does iFrameResizer overcomes the cross-domain limitations?

Using a technique called “postMessage”. This is a feature of modern web browsers that allows different windows or iFrames to communicate with each other, even if they are from different domains.

iFrameResizer uses postMessage to establish a communication channel between the parent window and the iFrame. When the iFrame’s content changes, it sends a message to the parent window with information about its new size. The parent window receives this message and updates the size of the iframe accordingly.

Since the communication is initiated by the iframe itself, rather than the parent window, it can bypass the cross-domain security restrictions. Cool, right?

Conclusion

Embedding a cross-origin page within an iFrame can be a challenging task, especially when it comes to resizing the iFrame to fit its content. However, with the iFrameResizer library, this challenge becomes much easier to overcome. This can save you significant time and effort, and enable you to focus on delivering great user experiences within your app. So if you’re struggling with resizing iFrames in OutSystems, give iFrameResizer a try and see how it can simplify your development process.