https://github.com/pagarevijayy/iframe-host-communication

Establishing communication between iframe and host project via postMessage API in react & vanilla-js project
https://github.com/pagarevijayy/iframe-host-communication

iframe postmessage-api reactjs vanilla-js

Last synced: about 2 months ago
JSON representation

Establishing communication between iframe and host project via postMessage API in react & vanilla-js project

• Host: GitHub
• URL: https://github.com/pagarevijayy/iframe-host-communication
• Owner: pagarevijayy
• Created: 2024-01-24T05:01:22.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-01-24T11:40:49.000Z (11 months ago)
• Last Synced: 2024-01-25T06:26:42.946Z (11 months ago)
• Topics: iframe, postmessage-api, reactjs, vanilla-js
• 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`