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

M2LOrder轻量级服务教程：API响应压缩（gzip）+WebUI资源懒加载优化

M2LOrder轻量级服务教程：API响应压缩（gzip）+WebUI资源懒加载优化 1. 引言 如果你正在运行一个类似M2LOrder这样的AI情感分析服务，可能会遇到两个常见问题：API接口响应慢，尤其是在网络条件一般的情况下；WebUI页面加载时间长，特别是首次访问时。这两个问题直接影响用户体验，让一个功能强大的服务变得“不好用”。 今天，我们就来聊聊如何通过两个简单但有效的优化手段，让你的M2LOrder服务“飞”起来。我们将重点介绍： 1. API响应压缩（gzip）：将API返回的数据“瘦身”，减少网络传输时间 2. WebUI资源懒加载：让页面“按需加载”，而不是一次性全部加载完 这两个优化都不需要改动核心业务逻辑，只需要在服务配置和前端加载策略上做一些调整。即使你不是专业的运维或前端工程师，跟着本文的步骤也能轻松搞定。 2. 为什么需要优化？ 在深入具体优化方法之前，我们先看看M2LOrder服务在优化前可能面临的问题。 2.1 API响应慢的痛点 M2LOrder的API在返回情感分析结果时，特别是批量预测接口，可能会返回较大的JSON数据。
C# WebAssembly血泪革命：从“页面卡成PPT”到“秒级响应”的10倍性能飞跃！

C# WebAssembly血泪革命：从“页面卡成PPT”到“秒级响应”的10倍性能飞跃！

🔥 一、为什么C# WebAssembly会“卡成PPT”？（别再当工具人！） 传统实现 = 人拉板车 “我只用，结果页面加载慢得像蜗牛！” * 痛点：未优化初始加载、未分页数据、未异步通信、未安全策略 * 灵魂拷问：你是在用WebAssembly，还是在给浏览器送“内存炸弹”？ 革命后的C# WebAssembly = 赛车引擎 “像AI一样智能加载，首次加载时间从30秒→2.8秒！” * 核心价值：初始代码分割+流式数据处理+异步通信优化+状态管理+安全策略（不是瞎用Blazor！） * 真实数据：优化后，首次加载时间从30秒→2.8秒（前端团队主动要求加功能！） 💡 金句暴击： “C# WebAssembly不是写前端，是让代码自己‘流起来’—— 你只用默认Blazor，等于让老司机开拖拉机！ 别再当‘WebAssembly小白’了！” 🧪 二、5层性能革命深度拆解（

Open WebUI Docker部署：容器化最佳实践

Open WebUI Docker部署：容器化最佳实践 【免费下载链接】open-webuiOpen WebUI 是一个可扩展、功能丰富且用户友好的自托管 WebUI，设计用于完全离线操作，支持各种大型语言模型（LLM）运行器，包括Ollama和兼容OpenAI的API。 项目地址: https://gitcode.com/GitHub_Trending/op/open-webui Open WebUI 是一个可扩展、功能丰富且用户友好的自托管 WebUI，设计用于完全离线操作，支持各种大型语言模型（LLM）运行器，包括Ollama和兼容OpenAI的API。本文将详细介绍如何通过Docker容器化方式部署Open WebUI，包括基础部署、GPU加速、数据持久化、高级配置及最佳实践指南，帮助用户快速搭建稳定高效的AI交互平台。 部署架构概览 Open WebUI的Docker部署采用多容器架构，通过Docker Compose实现服务编排。核心组件包括Ollama服务（模型运行时）和Open WebUI应用服务，两者通过内部网络通信，