https://github.com/yankouskia/iframy
Library for rendering cross-domain components
https://github.com/yankouskia/iframy
cross-domain iframe typescript
Last synced: 11 months ago
JSON representation
Library for rendering cross-domain components
- Host: GitHub
- URL: https://github.com/yankouskia/iframy
- Owner: yankouskia
- License: mit
- Created: 2019-08-10T00:45:56.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T06:42:11.000Z (over 3 years ago)
- Last Synced: 2025-04-02T01:41:28.695Z (about 1 year ago)
- Topics: cross-domain, iframe, typescript
- Language: TypeScript
- Homepage: https://yankouskia.github.io/iframy/demo/communication.html
- Size: 1.47 MB
- Stars: 21
- Watchers: 1
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/yankouskia/iframy/pulls) [](https://github.com/yankouskia/iframy/blob/master/LICENSE) 
[](https://www.npmjs.com/package/iframy)
# iframy
Library for rendering cross-domain components and communication between them
## Installation
npm:
```sh
npm install iframy --save
```
yarn:
```sh
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
```js
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
```js
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
```js
iframy.emit('message-type', { any: 'data' });
```
#### addListener / on
Method to subscribe to events, being sent from child
```js
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
```js
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
```js
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
```js
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
```js
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
```js
const data = iframy.props;
```
#### emit
Method to send message to parent component
```js
iframy.emit('message-type', { any: 'data' });
```
#### addListener / on
Method to subscribe to events, being sent from parent
```js
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
```js
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
```js
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
```js
iframy.removeAllListeners('message-type');
// or use alias
iframy.offAll('message-type');
```
## Examples
Find example [here](https://github.com/yankouskia/iframy/tree/master/demo)
## Contributing
`iframy` is open-source library, opened for contributions
### Tests
**in progress**
### License
iframy is [MIT licensed](https://github.com/yankouskia/iframy/blob/master/LICENSE)