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.
The basic iFrame 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
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
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.