Library for rendering cross-domain components
source link: http://github.com/yankouskia/iframy
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
iframy
Library for rendering cross-domain components and communication between them
Installation
npm:
npm install iframy --save
yarn:
yarn add iframy
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK