1.0.1 • Published 1 year ago

@pengxs/async-messenger v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

async-messenger

šŸš€ Synchronized communication between windows and iframes

Installing

Package manager

Using npm:

$ npm install @pengxs/asyn-messenger

Using yarn:

$ yarn add @pengxs/async-messenger

Using pnpm:

$ pnpm add @pengxs/async-messenger

Example

parent.html

<html>
<body>
  <iframe id="child" src="child.html" frameborder="0"></iframe>

  <script type="module">

    import asyncMessenger from '@pengxs/async-messenger'

    const child = document.querySelector('#child')
    child.onload = async () => {
      const messenger = asyncMessenger.create({target: child.contentWindow})
      const res = await messenger.post({event: 'say'})
      console.log(res) // Hello World
    }

  </script>

</body>
</html>

child.html

<html>
<body>

  <script type="module">

    import asyncMessenger from '@pengxs/async-messenger'

    const messenger = asyncMessenger.create({target: window.parent})
    window.addEventListener('message', async (e) => {
      const { data, channel } = e.data
      if (data.event == 'say') {
        messenger.send({ channel, data: 'Hello World' })
      }
    })

  </script>

</body>
</html>

License

MIT License Ā© 2023 Mark Peng

1.0.1

1 year ago

1.0.0

1 year ago