https://github.com/muke1908/iframy
Embed Iframe to your site and communicate with your iframe super easily.
https://github.com/muke1908/iframy
Last synced: 3 months ago
JSON representation
Embed Iframe to your site and communicate with your iframe super easily.
- Host: GitHub
- URL: https://github.com/muke1908/iframy
- Owner: muke1908
- Created: 2019-12-13T14:12:19.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T12:47:17.000Z (over 3 years ago)
- Last Synced: 2025-02-12T19:01:44.027Z (about 1 year ago)
- Language: JavaScript
- Size: 566 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# iFramy
Embed Iframe to your site and communicate with your iframe super easily.
## How to use:
Once you import the script, `iFramy` will be avaiable in global scope.
### Render iFrame:
```
iFramy.mount({
containerId: < container_id >,
url: ,
debug: < true | false >,
height: 500,
eventHandlers: Object,
onLoad: onLoadHandler
})
```
### Communication:
1. You can pass set of events and handlers in `eventHandlers` as key-value pair.
Example `eventHandlers`:
```
{
customEventFromIframe: customEventHandler,
someOtherEventFromIframe: someOtherEventHandler
}
```
2. Send message to iframe:
```
iFramy.sendToIframe({ eventType, data, targetOrigin })
```
### Troubleshoot known issue:
**Height:**
Setting height of iframe in host site is always tricky because of unknown content height.
There is a default handler in `iFramy` to set height. You can check height in your iframe by adding a `resize` listener
and send it back to parent by:
```
window.addEventListener("resize", ()=> {
// get and set height
window.parent.postMessage({
eventType: 'setHeight',
data: { height }
}, '*');
});
```