在 Tauri 桌面应用中嵌入百度首页的实践。最初使用 iframe 遇到跨域限制导致点击无响应，后迁移至 Tauri Webview API 解决。文章对比了 iframe 与 Webview 的差异，详细展示了 Webview 的生命周期管理、响应式布局处理及错误降级方案，强调了正确使用 getCurrentWebviewWindow 及资源清理的重要性。
在开发 Tauri 桌面应用时，我们需要在一个插件窗口中嵌入百度首页。最初使用 iframe 实现，但遇到了点击无响应的问题。最终通过迁移到 Tauri 的 Webview API 成功解决。
我们的应用使用 Tauri 2.0 + Vue 3 + TypeScript 技术栈。需求是在 src/plugins/baidu/index.vue 中实现一个显示百度首页的插件窗口，同时保留窗口控制按钮（最小化、最大化、关闭）。
<template>
<main data-tauri-drag-region>
<ActionBar :shrink="false" :max-w="true" :icon-color="'black'" :top-win-label="WebviewWindow.getCurrent().label" :current-label="WebviewWindow.getCurrent().label"/>
<iframe src="https://www.baidu.com" frameborder="0"></iframe>
</main>
</template>
<script setup lang="ts">
import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
</script>
实现后，用户反馈：打开百度网页之后点击没反应。
通过分析发现，问题出在 iframe 的跨域限制上：
X-Frame-Options: SAMEORIGIN，禁止在 iframe 中嵌入iframe 方案在嵌入第三方网站（尤其是大型网站如百度）时存在根本性限制，不是技术实现的问题，而是浏览器安全策略的限制。
为了找到正确的实现方式，我研究了项目中其他使用外部链接的插件：
在 src/components/rightBox/chatBox/Bot.vue 中找到了关键实现：
const createExternalWebview = async (url: string) => {
const windowInstance = await ensureHostWindow()
if (!windowInstance || !webviewContainer.value) return
try {
const existing = await Webview.getByLabel(webviewLabel)
await existing?.close()
} catch (error) {
// 忽略未找到的情况
}
await destroyExternalWebview()
const rect = webviewContainer.value.getBoundingClientRect()
const newWebview = new Webview(windowInstance, webviewLabel, {
url,
x: rect.left,
y: rect.top,
width: rect.width,
height: rect.height,
focus: true,
dragDropEnabled: true
})
externalWebview.value = newWebview
containerResizeObserver = new ResizeObserver(() => {
updateExternalWebviewBounds()
})
containerResizeObserver.observe(webviewContainer.value)
window.addEventListener('resize', updateExternalWebviewBounds, { passive: true })
}
相比 iframe，Tauri Webview API 具有以下优势：
将 iframe 替换为一个容器 div，用于挂载 Webview：
<template>
<main data-tauri-drag-region>
<ActionBar :shrink="false" :max-w="true" :icon-color="'black'" :top-win-label="currentWindow.label" :current-label="currentWindow.label"/>
<div data-tauri-drag-region>
<div ref="webviewContainer"></div>
</div>
</main>
</template>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { Webview } from '@tauri-apps/api/webview'
import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow'
import { openUrl } from '@tauri-apps/plugin-opener'
const webviewContainer = ref<HTMLElement | null>(null)
const externalWebview = ref<Webview | null>(null)
const webviewLabel = 'baidu-webview'
const currentWindow = getCurrentWebviewWindow()
let containerResizeObserver: ResizeObserver | null = null
let windowResizeListener: (() => void) | null = null
const updateWebviewBounds = async () => {
if (!webviewContainer.value || !externalWebview.value) return
try {
const rect = webviewContainer.value.getBoundingClientRect()
await externalWebview.value.setPosition(rect.left, rect.top)
await externalWebview.value.setSize(rect.width, rect.height)
} catch (error) {
console.error('更新 webview 边界失败:', error)
}
}
const initWebview = async () => {
await nextTick()
if (!webviewContainer.value) {
console.error('webviewContainer 未找到')
return
}
const windowInstance = getCurrentWebviewWindow()
try {
const existing = await Webview.getByLabel(webviewLabel)
if (existing) {
await existing.close()
}
} catch (error) {
console.log('没有找到已存在的 webview')
}
try {
const rect = webviewContainer.value.getBoundingClientRect()
const newWebview = new Webview(windowInstance, webviewLabel, {
url: 'https://www.baidu.com',
x: rect.left,
y: rect.top,
width: rect.width,
height: rect.height,
focus: true,
dragDropEnabled: true
})
externalWebview.value = newWebview
containerResizeObserver = new ResizeObserver(() => {
updateWebviewBounds()
})
containerResizeObserver.observe(webviewContainer.value)
windowResizeListener = () => {
updateWebviewBounds()
}
window.addEventListener('resize', windowResizeListener, { passive: true })
newWebview.once('tauri://created', async () => {
console.log('Webview 创建成功')
await updateWebviewBounds()
})
newWebview.once('tauri://error', (error) => {
console.error('Webview 创建失败:', error)
externalWebview.value = null
})
} catch (error) {
console.error('创建 webview 失败:', error)
console.log('尝试在系统浏览器中打开百度')
try {
await openUrl('https://www.baidu.com')
} catch (openError) {
console.error('在浏览器中打开失败:', openError)
}
}
}
onMounted(async () => {
await initWebview()
})
onUnmounted(async () => {
if (containerResizeObserver) {
containerResizeObserver.disconnect()
}
if (windowResizeListener) {
window.removeEventListener('resize', windowResizeListener)
}
if (externalWebview.value) {
try {
await externalWebview.value.close()
} catch (error) {
console.error('关闭 webview 失败:', error)
}
}
})
在实现过程中遇到了一个错误：
Uncaught ReferenceError: WebviewWindow is not defined
原因：模板中使用了 WebviewWindow.getCurrent()，但在 script 中只导入了 getCurrentWebviewWindow 函数，没有导入 WebviewWindow 类。
解决方法：
const currentWindow = getCurrentWebviewWindow() 来获取当前窗口实例WebviewWindow.getCurrent().label 替换为 currentWindow.label修改后的代码：
const currentWindow = getCurrentWebviewWindow()
<ActionBar :top-win-label="currentWindow.label" :current-label="currentWindow.label"/>
// 创建
const newWebview = new Webview(windowInstance, label, options)
// 更新位置和大小
await webview.setPosition(x, y)
await webview.setSize(width, height)
// 关闭
await webview.close()
使用 ResizeObserver 监听容器尺寸变化，自动调整 Webview 大小：
containerResizeObserver = new ResizeObserver(() => {
updateWebviewBounds()
})
containerResizeObserver.observe(webviewContainer.value)
监听窗口 resize 事件，确保 Webview 始终正确显示：
windowResizeListener = () => {
updateWebviewBounds()
}
window.addEventListener('resize', windowResizeListener, { passive: true })
在组件卸载时清理所有监听器和 Webview 实例：
onUnmounted(async () => {
if (containerResizeObserver) {
containerResizeObserver.disconnect()
}
if (windowResizeListener) {
window.removeEventListener('resize', windowResizeListener)
}
if (externalWebview.value) {
await externalWebview.value.close()
}
})
当 Webview 创建失败时，降级到在系统浏览器中打开：
try {
const newWebview = new Webview(windowInstance, webviewLabel, options)
} catch (error) {
console.error('创建 webview 失败:', error)
try {
await openUrl('https://www.baidu.com')
} catch (openError) {
console.error('在浏览器中打开失败:', openError)
}
}
| 特性 | iframe | Tauri Webview |
|---|---|---|
| 跨域限制 | 受限，很多网站禁止嵌入 | 无限制 |
| 交互支持 | 受限 | 完整支持 |
| 性能 | 较差 | 优秀 |
| 窗口管理 | 有限 | 灵活 |
| 适用场景 | 同源内容、简单嵌入 | 外部网站、复杂交互 |
getCurrentWebviewWindow() 而不是 WebviewWindow.getCurrent()通过这次从 iframe 到 Tauri Webview 的迁移实践，我们成功解决了百度网页点击无响应的问题。关键经验包括：
getCurrentWebviewWindow() 而不是 WebviewWindow这次实践不仅解决了具体问题，也加深了对 Tauri 框架的理解，为后续开发积累了宝贵经验。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online