batuhan / iframy

Library for rendering cross-domain components

iframy

Library for rendering cross-domain components and communication between them

Installation

npm:

npm install iframy --save

yarn:

yarn add iframy

DEMO

Communication demo

Support

Internet Explorer	Microsoft Edge	Mozilla Firefox	Google Chrome	Opera	Safari	Android WebView
10+ *	12+	8+	1+	9.5+	4+	Yes

* - Only for inline mode

API

Parent

create

Use method to initiate instance and pass necessary props / iframe configuration

dimensions - object with width and height properties, applied to iframe

props - any serializable initial data to send to child

scrolling - param to highlight whether content inside iframe should be scrollable

url - url to open inside child iframe

import { IFramyParent } from 'iframy/parent';

const iframy = IFramyParent.create({
  dimensions: {
    width: '80%',
    height: '80%',
  },
  props: {
    name: 'Alex',
  },
  scrolling: true,
  url: 'https://web-site.com',
});

render

Async method to render iframe into specific container. Used for lazy rendering of component. Once promise is resolved - child component is ready to be used

selector - string / HTMLElement parameter to point container where to render iframe

import { IFramyParent } from 'iframy/parent';

const iframy = IFramyParent.create({
  dimensions: {
    width: '80%',
    height: '80%',
  },
  props: {
    name: 'Alex',
  },
  scrolling: true,
  url: 'https://web-site.com',
});

await iframy.render('#container');

emit

Method to send message to child component

iframy.emit('message-type', { any: 'data' });

addListener / on

Method to subscribe to events, being sent from child

iframy.addListener('message-type', data => console.log(data));

// or use alias

iframy.on('message-type', data => console.log(data));

addListenerOnce / once

Method to subscribe to events, being sent from child; emitted once and listener is removed after that

iframy.addListenerOnce('message-type', data => console.log(data));

// or use alias

iframy.once('message-type', data => console.log(data));

removeListener / off

Method to remove specific listener from correspondent event type from child

iframy.removeListener('message-type', listener);

// or use alias

iframy.off('message-type', listener);

removeAllListeners / offAll

Method to remove all listeners from correspondent event type from child

iframy.removeAllListeners('message-type');

// or use alias

iframy.offAll('message-type');

Child

create

Use method to initialize child component and let parent know, that your iframe is ready

api - object of { [key: string]: function } structure to initialize api, being used by parent

import { IFramyChild } from 'iframy/child';

const iframy = await IFramyChild.create({
  api: {
    sendMessage: data => {;
      return `Message: ${data}`;
    },
  },
});

props

Data, passed from parent. Useful to receive initial data from parent window

const data = iframy.props;

emit

Method to send message to parent component

iframy.emit('message-type', { any: 'data' });

addListener / on

Method to subscribe to events, being sent from parent

iframy.addListener('message-type', data => console.log(data));

// or use alias

iframy.on('message-type', data => console.log(data));

addListenerOnce / once

Method to subscribe to events, being sent from parent; emitted once and listener is removed after that

iframy.addListenerOnce('message-type', data => console.log(data));

// or use alias

iframy.once('message-type', data => console.log(data));

removeListener / off

Method to remove specific listener from correspondent event type from parent

iframy.removeListener('message-type', listener);

// or use alias

iframy.off('message-type', listener);

removeAllListeners / offAll

Method to remove all listeners from correspondent event type from parent

iframy.removeAllListeners('message-type');

// or use alias

iframy.offAll('message-type');

Examples

Find example here

Contributing

iframy is open-source library, opened for contributions

Tests

in progress

License

iframy is MIT licensed