tauri + vue3 如何实现在一个页面上局部加载外部网页？

🏆本文收录于「Bug调优」专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！

问题描述

  tauri v1（1.6左右）+ vue3 我想在vue3前端 页面上 在一个页面 而不是window.open 打开一个新的窗口去加载外部网页 我想在一个页面中 局部中间 加载一个外部网页 （试过 iframe 不同源 加载不了那个网页的js 排除了） 试过window.location.href = 但是这个整个页面都跳转了 我想要的是局部
然后网上搜索 有一个 tauir 的 webview 标签可以 但是 我使用了 类似

 <webview v-show="posdatas.sfym" :src="posdatas.serverUrl" />

  但是页面 没有任何反应 是空白的 我的需求就是 这个环境中 tauri + vue3 在一个页面中的局部 加载外部网页 并且外部网页中的js 正常加载 就好比一个做一个 浏览器一样去访问那个网页 但是显示出的 界面是在这个页面的局部位置 不影响整个页面 希望解答！

如上问题有来自我自身项目开发，有的收集网站，有的来自读者，如有侵权，立马删除。

解决方案

  如下是上述问题的解决方案，仅供参考：

  在 Tauri v1（1.6左右）结合 Vue 3 的环境中，如果你希望在页面的局部区域加载一个外部网页，并且需要这个网页中的 JavaScript 能够正常执行，确实可以使用 Tauri 的 <webview> 标签来实现。不过，由于安全原因，浏览器的同源策略会阻止跨域的 iframe 执行脚本，这就是为什么你不能直接使用 <iframe> 加载不同源的网页。

关于你提到的 <webview> 标签没有显示任何内容的问题，这里有一些可能的原因和解决方案：

1. 确保 Tauri 版本支持：

   • 确认你正在使用的 Tauri 版本确实支持 <webview> 标签。在某些版本中，<webview> 可能还未被完全集成或存在兼容性问题。

2. 检查 src 属性：

   • 确保 :src="posdatas.serverUrl" 中的 posdatas.serverUrl 是一个有效的 URL，并且能够被加载。

3. CSS 样式问题：

   • 检查是否有 CSS 样式影响了 <webview> 的显示，例如 display: none 或 visibility: hidden。

4. JavaScript 错误：

   • 检查浏览器的开发者工具中的控制台，看是否有任何 JavaScript 错误阻止了 <webview> 的加载。

5. Tauri 配置问题：

   • 确保 Tauri 应用的配置允许加载外部内容。有时候，安全设置可能会阻止加载外部资源。

6. Vue 响应性问题：

   • 如果 posdatas.sfym 是一个布尔值，用来控制 <webview> 的显示，确保这个值是响应式的，并且在数据变化时能够触发 DOM 的更新。

7. 权限问题：

   • 确保 Tauri 应用有足够的权限去访问外部 URL。在某些系统或网络环境中，可能需要特定的权限。

8. 检查 Tauri 的依赖：

   • 确保 Tauri 的所有依赖都是最新的，并且没有已知的 bug 影响 <webview> 的功能。

如果上述方法都不能解决问题，你可以尝试创建一个简单的示例来隔离问题。例如，创建一个新的 Tauri + Vue 3 项目，只包含一个 <webview> 标签，看看是否能够正常工作。如果可以，那么问题可能出在你的项目特定的配置或代码上。

  此外，由于 Tauri 1.6 可能还不是一个长期支持版本，如果可能的话，考虑升级到最新版本的 Tauri，以获得更好的支持和修复。

  最后，如果你的问题依然无法解决，你可以考虑在 Tauri 社区或者相关的开发者论坛上寻求帮助，那里可能有其他开发者遇到过类似的问题，并提供了解决方案。

  希望如上措施及解决方案能够帮到有需要的你。

  PS：如若遇到采纳如下方案还是未解决的同学，希望不要抱怨&&急躁，毕竟影响因素众多，我写出来也是希望能够尽最大努力帮助到同类似问题的小伙伴，即把你未解决或者产生新Bug黏贴在评论区，我们大家一起来努力，一起帮你看看，可以不咯。

  若有对当前Bug有与如下提供的方法不一致，有个不情之请，希望你能把你的新思路或新方法分享到评论区，一起学习，目的就是帮助更多所需要的同学，正所谓「赠人玫瑰，手留余香」。

☀️写在最后

  ok，以上就是我这期的Bug修复内容啦，如果还想查找更多解决方案，你可以看看我专门收集Bug及提供解决方案的专栏「Bug调优」，都是实战中碰到的Bug，希望对你有所帮助。到此，咱们下期拜拜。

码字不易，如果这篇文章对你有所帮助，帮忙给bug菌来个一键三连(关注、点赞、收藏) ，您的支持就是我坚持写作分享知识点传播技术的最大动力。

同时也推荐大家关注我的硬核公众号:「猿圈奇妙屋」 ；以第一手学习bug菌的首发干货，不仅能学习更多技术硬货，还可白嫖最新BAT大厂面试真题、4000G Pdf技术书籍、万份简历/PPT模板、技术文章Markdown文档等海量资料，你想要的我都有！

📣关于我

我是bug菌，CSDN | 掘金 | InfoQ | 51CTO | 华为云 | 阿里云 | 腾讯云 等社区博客专家，C站博客之星Top30，华为云2023年度十佳博主，掘金多年度人气作者Top40，掘金等各大社区签约作者，51CTO年度博主Top12，掘金/InfoQ/51CTO等社区优质创作者；全网粉丝合计 30w+；硬核微信公众号「猿圈奇妙屋」，欢迎你的加入！免费白嫖最新BAT互联网公司面试真题、4000G PDF电子书籍、简历模板等海量资料，你想要的我都有，关键是你不来拿哇。

---