Tauri 中嵌入百度网页：从 iframe 到 Webview 的迁移实践

优质文章学习记录

— 7 min read

Tauri 中嵌入百度网页：从 iframe 到 Webview 的迁移实践

问题描述

在开发 Tauri 桌面应用时，我们需要在一个插件窗口中嵌入百度首页。最初使用 iframe 实现，但遇到了点击无响应的问题。最终通过迁移到 Tauri 的 Webview API 成功解决。

问题背景

我们的应用使用 Tauri 2.0 + Vue 3 + TypeScript 技术栈。需求是在 src/plugins/baidu/index.vue 中实现一个显示百度首页的插件窗口，同时保留窗口控制按钮（最小化、最大化、关闭）。

初次尝试：使用 iframe

实现代码

<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 的跨域限制上：

  1. X-Frame-Options 限制：百度在响应头中设置了 X-Frame-Options: SAMEORIGIN，禁止在 iframe 中嵌入
  2. 跨域安全策略：现代浏览器出于安全考虑，阻止了 iframe 内的点击事件
  3. 用户体验差：即使能加载，iframe 内的交互也会受到各种限制

iframe 方案在嵌入第三方网站（尤其是大型网站如百度）时存在根本性限制，不是技术实现的问题，而是浏览器安全策略的限制。

解决方案：使用 Tauri Webview API

研究现有实现

为了找到正确的实现方式，我研究了项目中其他使用外部链接的插件：

  1. dynamic/index.vue：动态内容插件
  2. robot/index.vue：聊天机器人插件
  3. Bot.vue：聊天框组件，包含 Webview 实现

在 src/components/rightBox/chatBox/Bot.vue 中找到了关键实现：

constcreateExternalWebview=async(url:string)=>{const windowInstance =awaitensureHostWindow()if(!windowInstance ||!webviewContainer.value)returntry{const existing =await Webview.getByLabel(webviewLabel)await existing?.close()}catch(error){// 忽略未找到的情况}awaitdestroyExternalWebview()const rect = webviewContainer.value.getBoundingClientRect()const newWebview =newWebview(windowInstance, webviewLabel,{ url, x: rect.left, y: rect.top, width: rect.width, height: rect.height, focus:true, dragDropEnabled:true}) externalWebview.value = newWebview containerResizeObserver =newResizeObserver(()=>{updateExternalWebviewBounds()}) containerResizeObserver.observe(webviewContainer.value) window.addEventListener('resize', updateExternalWebviewBounds,{ passive:true})}

Webview API 的优势

相比 iframe，Tauri Webview API 具有以下优势：

  1. 无跨域限制：使用系统级 webview 组件，不受浏览器同源策略限制
  2. 完整交互支持：支持所有正常的网页交互（点击、输入、导航等）
  3. 更好的性能：原生组件，性能优于 iframe
  4. 灵活的窗口管理：可以精确控制位置、大小、焦点等

实现迁移

第一步：添加容器元素

将 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>
第二步：实现 Webview 创建逻辑
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=nulllet windowResizeListener:(()=>void)|null=nullconstupdateWebviewBounds=async()=>{if(!webviewContainer.value ||!externalWebview.value)returntry{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)}}constinitWebview=async()=>{awaitnextTick()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 =newWebview(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 =newResizeObserver(()=>{updateWebviewBounds()}) containerResizeObserver.observe(webviewContainer.value)windowResizeListener=()=>{updateWebviewBounds()} window.addEventListener('resize', windowResizeListener,{ passive:true}) newWebview.once('tauri://created',async()=>{console.log('Webview 创建成功')awaitupdateWebviewBounds()}) newWebview.once('tauri://error',(error)=>{console.error('Webview 创建失败:', error) externalWebview.value =null})}catch(error){console.error('创建 webview 失败:', error)console.log('尝试在系统浏览器中打开百度')try{awaitopenUrl('https://www.baidu.com')}catch(openError){console.error('在浏览器中打开失败:', openError)}}}onMounted(async()=>{awaitinitWebview()})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)}}})
第三步：修复 WebviewWindow 导入错误

在实现过程中遇到了一个错误：

Uncaught ReferenceError: WebviewWindow is not defined

原因：模板中使用了 WebviewWindow.getCurrent()，但在 script 中只导入了 getCurrentWebviewWindow 函数，没有导入 WebviewWindow 类。

解决方法：

  1. 在 script 中添加 const currentWindow = getCurrentWebviewWindow() 来获取当前窗口实例
  2. 在模板中将 WebviewWindow.getCurrent().label 替换为 currentWindow.label

修改后的代码：

const currentWindow =getCurrentWebviewWindow()
<ActionBar :top-win-label="currentWindow.label" :current-label="currentWindow.label"/>

关键技术点

1. Webview 生命周期管理

// 创建const newWebview =newWebview(windowInstance, label, options)// 更新位置和大小await webview.setPosition(x, y)await webview.setSize(width, height)// 关闭await webview.close()

2. 响应式布局处理

使用 ResizeObserver 监听容器尺寸变化，自动调整 Webview 大小：

containerResizeObserver =newResizeObserver(()=>{updateWebviewBounds()}) containerResizeObserver.observe(webviewContainer.value)

3. 窗口大小变化处理

监听窗口 resize 事件，确保 Webview 始终正确显示：

windowResizeListener=()=>{updateWebviewBounds()} window.addEventListener('resize', windowResizeListener,{ passive:true})

4. 清理资源

在组件卸载时清理所有监听器和 Webview 实例：

onUnmounted(async()=>{if(containerResizeObserver){ containerResizeObserver.disconnect()}if(windowResizeListener){ window.removeEventListener('resize', windowResizeListener)}if(externalWebview.value){await externalWebview.value.close()}})

5. 错误处理和降级方案

当 Webview 创建失败时，降级到在系统浏览器中打开：

try{const newWebview =newWebview(windowInstance, webviewLabel, options)}catch(error){console.error('创建 webview 失败:', error)try{awaitopenUrl('https://www.baidu.com')}catch(openError){console.error('在浏览器中打开失败:', openError)}}

iframe vs Webview 对比

特性iframeTauri Webview
跨域限制受限，很多网站禁止嵌入无限制
交互支持受限完整支持
性能较差优秀
窗口管理有限灵活
适用场景同源内容、简单嵌入外部网站、复杂交互

最佳实践

1. 何时使用 iframe

  • 嵌入同源内容
  • 简单的静态内容展示
  • 不需要复杂交互的场景

2. 何时使用 Tauri Webview

  • 嵌入第三方网站（如百度、Google）
  • 需要完整网页交互
  • 需要精确控制窗口行为
  • 需要更好的性能

3. 注意事项

  1. 获取正确的窗口实例：使用 getCurrentWebviewWindow() 而不是 WebviewWindow.getCurrent()
  2. 清理资源：务必在组件卸载时清理 Webview 和监听器
  3. 响应式布局：使用 ResizeObserver 处理容器尺寸变化
  4. 错误处理：提供降级方案，提升用户体验
  5. 唯一标识：为每个 Webview 设置唯一的 label，避免冲突

总结

通过这次从 iframe 到 Tauri Webview 的迁移实践，我们成功解决了百度网页点击无响应的问题。关键经验包括：

  1. 理解技术限制：iframe 在嵌入第三方网站时存在根本性限制
  2. 选择正确方案：Tauri Webview API 是嵌入外部网站的最佳选择
  3. 注意 API 使用：正确使用 getCurrentWebviewWindow() 而不是 WebviewWindow
  4. 完善生命周期管理：妥善处理创建、更新、销毁等各个环节
  5. 提供降级方案：在 Webview 创建失败时提供备选方案

这次实践不仅解决了具体问题，也加深了对 Tauri 框架的理解，为后续开发积累了宝贵经验。

参考资料

Read more

【论文阅读】Vision-skeleton dual-modality framework for generalizable assessment of Parkinson’s disease ga

【论文阅读】Vision-skeleton dual-modality framework for generalizable assessment of Parkinson’s disease ga

论文题目：《Vision-skeleton dual-modality framework for generalizable assessment of Parkinson’s disease gait》 论文链接：https://doi.org/10.1016/j.media.2025.103727  代码链接：https://github.com/FJNU-LWP/PD-gait-VSDF 视觉-骨架双模态框架：通过视频实现帕金森病步态的泛化评估 研究背景介绍 帕金森病评估与帕金森病评分量表（MDS-UPDRS） 帕金森病步态评估 研究内容 总体方法流程 关键点视觉 Transformer (KVT) 图像块嵌入 (Patches embedding) 位置与连接嵌入 (Positions and connections embedding) 关键点自注意力 (Keypoints Self-Attention,
【无人机源码】低空无人机智能管控、AI 无人机智慧巡检平台，20+AI场景智能识别，赋能低空一网通飞新

【无人机源码】低空无人机智能管控、AI 无人机智慧巡检平台，20+AI场景智能识别，赋能低空一网通飞新

# 空域数智通：县域低空一体化AI巡检平台 ## 源码交付｜1+1+X空地一体架构｜60+智能算法｜县域低空经济落地解决方案 🛰️卫星：BNBJKJK --- ### 平台核心定位：打通低空经济“最后一公里” 在国家-省-市三级低空监管体系下，县域平台承担着**关键落地执行单元**的角色。我们专注于解决县域低空管理“看得见、管得住、用得好”的实践难题，将顶层设计转化为基层可执行、可运营的数字化能力。 --- ### 双核驱动：数字基座+数据智能 **数字孪生基座** - 真实映射县域“场、站、机”等物理设施 - 集成“通、导、监”等数字基础设施 - 构建全域可视、可管、可控的数字空间 **数据智能中枢** - 汇聚空域、

# OpenClaw QQ 机器人接入完整指南

作者: 星期五助手 创建时间: 2026-03-05 适用版本: OpenClaw 2026.2.26+ 📖 目录 1. 项目概述 2. 环境准备 3. 安装 NapCat QQ 机器人 4. 配置 OpenClaw QQ 插件 5. 网络配置（关键） 6. 测试与验证 7. 常见问题 项目概述 本指南介绍如何将 OpenClaw 接入 QQ，实现通过 QQ 与 OpenClaw 智能助手对话。 架构说明 ┌─────────────┐ ┌──────────────┐ ┌─────────────┐ │ QQ 用户 │ ──→ │ NapCat │ ──→ │ OpenClaw │ │ (发消息) │ │ (QQ 机器人) │ │ (星期五)

MIPI DSI 4-Lane液晶屏驱动开发实战：从时序解析到FPGA对接

1. MIPI DSI 4-Lane液晶屏基础认知 第一次接触MIPI DSI 4-Lane液晶屏时，我被它复杂的时序图吓到了——直到把它想象成高速公路的车道管理才豁然开朗。这种显示屏采用串行差分信号传输，4条数据通道就像双向四车道的高速公路，每条lane的传输速率可达480MHz（实测GOWIN开发板环境），比传统并行RGB接口节省了约60%的引脚资源。 以常见的5寸720x1280分辨率屏幕为例，其核心参数如下表： 参数项典型值技术要点接口类型MIPI DSI 4-Lane支持LP/HS双模式分辨率720(H)×1280(V)60Hz刷新率色彩深度24bit RGB实际传输采用RGB888压缩为RGB565功耗特性LP模式<10mAHS模式峰值电流约120mA同步模式SYNC EVENT需要精确控制消隐区时序 在硬件连接时，我曾犯过把CLK和DATA线序接反的低级错误。正确的接线顺序应该是： 1. 先对接CLK+/CLK-差分对（相当于交通信号灯） 2. 再按D0+/D0-到D3+/D3-顺序连接数据线 3. 最后接电源和背光（VCC/VLED等） 2.