inFlow interactive flowcharts

Documentation

Embedding charts

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

The basic iFrame element has limitations. These include:
  • Not being able to properly size the iFrame to the dimensions of its content
  • Not being able to able to communicate between the parent page and the iFrame
  • Performance issues
  • Security 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, Vue or Angular.

    Why iframe-resizer?

    Some of the tools iframe-resizer provides are:
  • Height and width resizing of the iFrame to content size
  • Detects changes to the DOM that can cause the page to resize using MutationObserver.
  • Simplified messaging between iFrame and host page via postMessage.
  • Provides custom sizing and scrolling methods.
  • Domain authentication for cross domain iFrames.
  • comment-avatar
    We're here if you need us..