内容简介: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》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数据挖掘
(美)Jiawei Han、(加)Micheline Kamber、(加)Jian Pei / 范明、孟小峰 / 机械工业出版社 / 2012-8 / 79.00元
数据挖掘领域最具里程碑意义的经典著作 完整全面阐述该领域的重要知识和技术创新 这是一本数据挖掘和知识发现的优秀教材,结构合理、条理清晰。本书既保留了相当篇幅讲述数据挖掘的基本概念和方法,又增加了若干章节介绍数据挖掘领域最新的技术和发展,因此既适合初学者学习又适合专业人员和实践者参考。本书视角广阔、资料翔实、内容全面,能够为有意深入研究相关技术的读者提供足够的参考和支持。总之, 强烈推荐......一起来看看 《数据挖掘》 这本书的介绍吧!