https://github.com/pagarevijayy/iframe-host-communication
Communicate between iframe and host project using postMessage API.
https://github.com/pagarevijayy/iframe-host-communication
iframe javascript postmessage-api reactjs
Last synced: about 2 months ago
JSON representation
Communicate between iframe and host project using postMessage API.
- Host: GitHub
- URL: https://github.com/pagarevijayy/iframe-host-communication
- Owner: pagarevijayy
- Created: 2024-01-24T05:01:22.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-24T11:40:49.000Z (over 2 years ago)
- Last Synced: 2025-10-10T05:17:10.344Z (8 months ago)
- Topics: iframe, javascript, postmessage-api, reactjs
- Language: TypeScript
- Homepage:
- Size: 43.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# iFrame <> Host Communication
Establishing communication between iframe and host project via postMessage API in react project.
"**host-project**" can be any project inside which our iframe is being used. "_iframe-project_" contains our iframe.
Install & run individual projects separately to test the setup. Update necessary urls.
Remember:
- Update the allowed hosts inside the iframe project.
- Update the iframe domain url inside the host projects as needed.
To test without updating urls:
```
- Run iframe on port 5173, and host project on 5174 (i.e http://localhost:5174) i.e run npm dev first for iframe and then for host.
- host-project-2 on http://127.0.0.1:5500
```
Command to make project run on a particular port:
`npm run dev -- --port 5174`