index.html 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!doctype html>
  2. <html>
  3. <h1>Send a message to a window using its label:</h1>
  4. <form id="send-message-form">
  5. <input id="send-message" placeholder="message" />
  6. <input id="send-label" placeholder="Secondary" />
  7. <button type="submit">Send</button>
  8. </form>
  9. <br />
  10. <h1>Create new window</h1>
  11. <form id="new-window-form">
  12. <input id="new-label" placeholder="newLabel" />
  13. <input id="new-title" placeholder="New window" />
  14. <button type="submit">Create</button>
  15. </form>
  16. <br />
  17. <h1>Messages received from other windows:</h1>
  18. <pre id="messages-view"></pre>
  19. <body>
  20. <script>
  21. const { WebviewWindow } = window.__TAURI__.webviewWindow
  22. const { getCurrentWebviewWindow } = window.__TAURI__.webviewWindow
  23. const { emitTo } = window.__TAURI__.event
  24. const sendMessageForm = document.querySelector('#send-message-form')
  25. const sendMessageEl = document.querySelector('#send-message')
  26. const sendLabelEl = document.querySelector('#send-label')
  27. sendMessageForm.addEventListener('submit', (e) => {
  28. e.preventDefault()
  29. console.log(sendLabelEl.value)
  30. console.log(sendMessageEl.value)
  31. emitTo(sendLabelEl.value, 'message', sendMessageEl.value)
  32. })
  33. const newWindowForm = document.querySelector('#new-window-form')
  34. const newLabelEl = document.querySelector('#new-label')
  35. const newTitleEl = document.querySelector('#new-title')
  36. newWindowForm.addEventListener('submit', (e) => {
  37. e.preventDefault()
  38. new WebviewWindow(newLabelEl.value, {
  39. title: newTitleEl.value
  40. })
  41. })
  42. const currentWindow = getCurrentWebviewWindow()
  43. const messagesView = document.querySelector('#messages-view')
  44. window.addEventListener('DOMContentLoaded', () => {
  45. currentWindow.listen('message', (event) => {
  46. const time = new Date().toLocaleTimeString()
  47. messagesView.textContent = `${messagesView.textContent}\n[${time}] ${event.payload}`
  48. })
  49. })
  50. </script>
  51. </body>
  52. </html>