Files
tauri/examples/multiwindow/index.html
Lucas Fernandes Nogueira c77b40324e refactor(core): add support to multiple webviews on a Tauri window (#8280)
* feat: update to latest wry

* wry dev branch [skip ci]

* fix linux [skip ci]

* refactor(runtime): split webview and window types

* split dispatch

* implement create_webview

* move webview message

* wip webview mod

* create webview manager, finish webview struct and builder

* fix tests and docs

* rename WindowUrl to WebviewUrl

* update examples

* event refactor

* update JS API

* fix events

* update example

* add WebviewWindow class on JS

* fix macos build

* allow creating window+webview on the same runtime call

* rename tauri://window-created to tauri://webview-created

* Window::add_child

* use inner_size from webview on macOS

* add multiwebview example

* automatically resize webviews on window resize

* fix tests

* set_position, set_size

* position, size getters

* set_focus

* add close fn

* update mock runtime

* lint [skip ci]

* fix inner_size getter [skip ci]

* import hwnd [skip ci]

* update webview bound ratios on set_size/set_position

* add auto_resize option

* fix android

* fix build on windows

* typo

* with_webview isnt desktop only

* add WebviewWindow rust struct (and builder)

* fix build on android

* license header

* fix macos/windows

* fix macos build

* resolve todo

* handle window not found

* hide unstable features

* document unstable feature [skip ci]

* webview plugin permissions

* hide more stuff

* fix doctests

* typos

* add change files

* fix examples

* rename hook
2024-01-24 11:05:18 -03:00

85 lines
2.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<style>
#response {
white-space: pre-wrap;
}
</style>
</head>
<body>
<div id="window-label"></div>
<div id="container"></div>
<div id="response"></div>
<script>
const WebviewWindow = window.__TAURI__.webview.WebviewWindow
const appWindow = window.__TAURI__.window.getCurrent()
const windowLabel = appWindow.label
const windowLabelContainer = document.getElementById('window-label')
windowLabelContainer.innerText = 'This is the ' + windowLabel + ' window.'
const container = document.getElementById('container')
function createWindowMessageBtn(label) {
const webview = WebviewWindow.getByLabel(label)
const button = document.createElement('button')
button.innerText = 'Send message to ' + label
button.addEventListener('click', function () {
webview.emit('clicked', 'message from ' + windowLabel)
})
container.appendChild(button)
}
// global listener
const responseContainer = document.getElementById('response')
window.__TAURI__.event.listen('clicked', function (event) {
responseContainer.innerHTML +=
'Got ' + JSON.stringify(event) + ' on global listener\n\n'
})
window.__TAURI__.event.listen('tauri://webview-created', function (event) {
createWindowMessageBtn(event.payload.label)
})
// listener tied to this window
appWindow.listen('clicked', function (event) {
responseContainer.innerText +=
'Got ' + JSON.stringify(event) + ' on window listener\n\n'
})
const createWindowButton = document.createElement('button')
createWindowButton.innerHTML = 'Create window'
createWindowButton.addEventListener('click', function () {
const id = Math.random().toString().replace('.', '')
const webview = new WebviewWindow(id, { tabbingIdentifier: windowLabel })
webview.once('tauri://created', function () {
responseContainer.innerHTML += 'Created new window'
})
webview.once('tauri://error', function (e) {
responseContainer.innerHTML += 'Error creating new window ' + e.payload
})
})
container.appendChild(createWindowButton)
const globalMessageButton = document.createElement('button')
globalMessageButton.innerHTML = 'Send global message'
globalMessageButton.addEventListener('click', function () {
// emit to all windows
window.__TAURI__.event.emit('clicked', 'message from ' + windowLabel)
})
container.appendChild(globalMessageButton)
const allWindows = window.__TAURI__.window.getAll()
for (const index in allWindows) {
const label = allWindows[index].label
if (label === windowLabel) {
continue
}
createWindowMessageBtn(label)
}
</script>
</body>
</html>