内容简介:Library for rendering cross-domain components and communication between themnpm:
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
以上所述就是小编给大家介绍的《Cross-Domain components rendering / manipulation lightweight library》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。