2.4 | The Cubbles IFrame Resizer API

Owned by Edwin Gamboa
Last updated: Aug 02, 2017 by Judit Ross
1 min read


Purpose

Cubbles supports the integration of any component into a webpage using the html iframe element (See 2.4 | The Cubbles IFrame API). Additionally, using the iframe-resizer utility, the Cubbles iframe will resize according to its content. The following sections indicate how to use the iframe-resizer utility to automatically resize a Cubbles iframe.

Use

If you want the Cubbles iframe to be resized automatically according to its content size; you can use the iframe-resizer utility. Lets suppose you want to use a Cubbles iframe to display the "first-demo-component" from the "demo-package@1.0". Thus, you should include an iframe html element as follows (See 2.4 | The Cubbles IFrame API):

<html>
...
<body>
  <iframe id="myIframe" src="https://cubbles.world/core/rte@2.3.0/iframe/index.html?webpackage-id=demo-package@1.0&artifact-id=first-demo-component"/>
</body>
</html>

Including the iframe-resizer utility

Now you need to include the utility as script within the head of your html page. By the moment it is available at https://cubbles.world/core/cubx.core.rte@2.3.0/iframe-resizer/resize.js. Thus, your code should now look as shown below:

<html>
<head>
   <script src="https://cubbles.world/core/cubx.core.rte@2.3.0/iframe-resizer/resize.js"/>
</head>
<body>
  <iframe id="myIframe" src="https://cubbles.world/core/rte@2.3.0/iframe/index.html?webpackage-id=demo-package@1.0&artifact-id=first-demo-component"/>
</body>
</html>

Setting the iframe id

Finally 1) make sure the id attribute of your iframe is set and 2) pass it to the Cubbles iframe using iframe-id parameter in the src url:

<html>
<head>
   <script src="https://cubbles.world/core/cubx.core.rte@2.3.0/iframe-resizer/resize.js"/>
</head>
<body>
  <iframe id="myIframe" src="https://cubbles.world/core/rte@2.3.0/iframe/index.html?iframe-id=myIframe&webpackage-id=demo-package@1.0&artifact-id=first-demo-component"/>
</body>
</html>

Remember that the id of the iframe should be the same as the iframe-id value passed as parameter, otherwise the resizing wouldn't work.


Now, the width of the iframe will be set to 100%. The height will be set according to the body content of the iframe whenever it changes.