Trigger navigate to home by postMessage, remove iframe border

frontend/src/components/embedded-table/EmbeddedTable.vue

@@ -5,14 +5,41 @@
     height="100%"
     :src="props.url"
     allow="camera;microphone;fullscreen;display-capture *;"
+    class="table-iframe"
   ></iframe>
 </template>
 
 <script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+
 const props = defineProps<{
   /**
    * The url of the BigBlueButton meeting table (CSP should allow only specific hosts)
    */
   url: string | null
 }>()
+
+const emit = defineEmits<{
+  (e: 'table-closed'): void
+}>()
+
+const postMessageListener = (event: MessageEvent) => {
+  if (event.data === 'close') {
+    emit('table-closed')
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('message', postMessageListener)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('message', postMessageListener)
+})
 </script>
+
+<style scoped>
+.table-iframe {
+  border: none;
+}
+</style>

frontend/src/pages/table-closed/+Page.vue

@@ -3,10 +3,9 @@
 </template>
 
 <script setup lang="ts">
-import { navigate } from 'vike/client/router'
-import { onBeforeMount } from 'vue'
+import { onMounted } from 'vue'
 
-onBeforeMount(() => {
-  navigate('/')
+onMounted(() => {
+  window.parent.postMessage('close', '*')
 })
 </script>

frontend/src/pages/table/+Page.vue

@@ -1,13 +1,14 @@
 <template>
   <DefaultLayout>
     <div class="container">
-      <EmbeddedTable :url="tableUrl" />
+      <EmbeddedTable :url="tableUrl" @table-closed="onTableClosed" />
     </div>
   </DefaultLayout>
 </template>
 
 <script setup lang="ts">
 import { useQuery } from '@vue/apollo-composable'
+import { navigate } from 'vike/client/router'
 import { ref, watch } from 'vue'
 
 import EmbeddedTable from '#components/embedded-table/EmbeddedTable.vue'
@@ -41,6 +42,8 @@ watch(joinTableQueryResult, (data: { joinTable: string }) => {
 watch(joinTableQueryError, (error) => {
   GlobalErrorHandler.error('Error opening table', error)
 })
+
+const onTableClosed = () => navigate('/')
 </script>
 
 <style scoped lang="scss">