Skip to main content
Version: 13.x (Current)

Dynamic Iframe

<bk-dynamic-iframe></bk-dynamic-iframe>

The Dynamic Iframe allows to render an iframe with a dynamic source url.

Particularly, the source url of the rendered iframe may be dependent from the value of the url of the page in which the Dynamic Iframe is mounted.

How to configure​

The urlMask and src properties of the Dynamic Iframe should be initialized.

{
  "tag": "bk-dynamic-iframe",
  "properties": {
    "urlMask": "/order-details/:id",
    "src": "/timeline/order/{{id}}"
  }
}

Upon connecting to the DOM, the Dynamic Iframe

  1. uses the urlMask to extract parameters from the window url
  2. computes the source url of the iframe to render by interpolating the data extracted from the previous step inside the src property
  3. renders an iframe having source equal to the result of the previous step

Examples​

A Dynamic Iframe configured like the following

{
  "tag": "bk-dynamic-iframe",
  "properties": {
    "urlMask": {
      "search": "\\?:search"
    },
    "src": "timeline/order?{{search}}"
  }
}

mounted in a page with URl /orders-list?_p=_id,name&_l=10 will render an iframe like:

<iframe src="timeline/order?_p=_id,name&_l=10"></iframe>

API​

Properties & Attributes​

propertyattributetypedefaultdescription
urlMaskurl-maskUrlMask-url mask to apply to the current path to extract dynamic parameters
srcsrcstring-the url source of the rendered iframe

Listens to​

This component listens to no event.

Emits​

This component emits no event.