Introduction
Our charts are embedded with the use of an
iFrame. iFrame is short for Inline Frame.
The iFrame element allows you to include (embed) content from a different source then your own website. You have probably seen YouTube videos embedded on websites other than YouTube. This is done with an iFrame.
Limitations of the basic iFrame element
The basic iFrame html element has limitations. These include:
Not being able to properly size the iFrame to the dimensions of its contentNot being able to able to communicate between the parent page and the iFramePerformance issuesSecurity issues Providing a better experience
iFrame Resizer library
We use the excellent
iframe-resizer library by David J. Bradshaw (buy him a
coffee!) to embed our charts. This library provides us with multiple tools to overcome the limitations of the basic iFrame element.
The library is available for
jQuery, which most of our clients use (e.g. building on Wordpress or a proprietary CMS). For more advanced websites there are ways to use
React,
Vue or
Angular.
Why iframe-resizer?
Some of the tools iframe-resizer provides are:
Height and width resizing of the iFrame to content sizeDetects changes to the DOM that can cause the page to resize using MutationObserver.Simplified messaging between iFrame and host page via postMessage.Fixes in page links in iFrame and supports links between the iFrame and parent page.Provides custom sizing and scrolling methods.Domain authentication for cross domain iFrames.