electron中的webview、iframe、BrowserView哪个好？如何选择(一) - 码农知识堂

electron中的webview、iframe、BrowserView哪个好？如何选择(一)

有三种方式可以让你在Electron的BrowserWindow里集成（第三方）web内容，</code>和, <code><webview> </code>和 <code>BrowserViews </code>每个功能都略有不同，适用于不同的情况。 <h4><a id="iframe_3"></a>一、<a href="https://so.csdn.net/so/search?q=iframe&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=iframe&spm=1001.2101.3001.7020"}" data-tit="iframe" data-pretit="iframe">iframe</a></h4> Iframe 在 <a href="https://so.csdn.net/so/search?q=Electron&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=Electron&spm=1001.2101.3001.7020"}" data-tit="Electron" data-pretit="electron">Electron</a> 中的行为与普通浏览器中类似。在宿主页面的 Content Security Policy 允许范围内，一个元素能在页面上显示外部网页。要限制标签中站点的功能数量，建议使用 sandbox 属性并且只允许您想要支持的功能。 <h4><a id="WebView_6"></a>二、WebView</h4> <code>WebViews</code>基于 Chromium 的 WebView，不被 Electron 明确支持。我们不能保证WebView API 在未来版本的 Electron 中仍然可用。如果想要使用<code><webview></code>标签，您需要在BrowserWindow 的 <code>webPreferences </code>中设置 <code>webviewTag</code> 为 <code>true</code>。 <pre data-index="0" class="prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { webviewTag:true } }) <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li></ul></pre> 在新版本中这个标签会发生剧烈的结构变化，可能会影响应用程序的稳定性。考虑切换到其他选择，如 iframe 和Electron的 BrowserView，或避免嵌入式内容设计的架构。 <h4><a id="BrowserView_22"></a>三、BrowserView</h4> <code>BrowserView </code>被用来让 BrowserWindow 嵌入更多的 web 内容。它就像一个子窗口，除了它的位置是相对于父窗口。这意味着可以替代webview标签。 BrowserView不是 DOM 的一部分，而是由主进程创建和控制。它们只是现有窗口之上的另一层 Web 内容。这意味着它们与您自己的 BrowserWindow 内容完全分离，并且它们的位置不受 DOM 或 CSS 的控制，而是通过在主进程中设置边界来控制其位置。相反，它通过在主进程中设置界面来控制。 <code>BrowserViews </code>提供对其内容的最大控制，因为它们实现 <code>webContents </code>的方式与 BrowserWindow 实现内容的方式类似。但是，由于<code>BrowserViews</code>不是 <code>DOM</code> 的一部分，而是覆盖在它们之上，因此您必须手动管理它们的位置。管理方式也非常简单 <pre data-index="1" class="prettyprint"><code class="prism language-js has-numbering" onclick="mdcp.signin(event)" style="position: unset;">// 在主进程中. const { app, BrowserView, BrowserWindow } = require('electron') app.whenReady().then(() => { const win = new BrowserWindow({ width: 800, height: 600 }) const view = new BrowserView() //创建子窗口 win.setBrowserView(view) //自窗口设置嵌入式子窗口 view.setBounds({ x: 0, y: 0, width: 300, height: 300 }) //设置x，y坐标，窗口宽度和高度 view.webContents.loadURL('https://www.electronjs.org') //加载页面 //view.webContents 子窗口通过webContents可以实现最大控制 //view.setAutoResize(options) //width boolean（可选） - 如果为true，视图宽度跟随窗口变化。默认值为 false //height boolean(可选) - 如果 true，视图的高度将增长和缩小与窗口。默认值为 false //horizontal boolean (可选) - 如果为 true，视图的x轴和宽度将随着窗口的大小变化等比例缩放。默认值为 false //vertical boolean(可选) - 如果 true，视图的y位置和高度将增长和收缩比例与窗口。默认值为 false }) <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li></ul></pre> <h2><a name="t0"></a><a id="_47"></a>总结：</h2> 在使用过程中如果需要使用嵌入<code>Web</code>页面，可以使用<code>BrowserView</code>，因为BrowserView对新版本的Electron支持性更好，而且拥有窗口化最大控制权限 </div> </div> </li> <li class="list-group-item ul-li"> 相关阅读: <a href="/Article/Index/1098130">Java中static方法和普通方法的举例说明</a> <a href="/Article/Index/770671">第09章性能分析工具的使用【2.索引及调优篇】【MySQL高级】</a> <a href="/Article/Index/1310339">go如何读取或设置os的环境变量</a> <a href="/Article/Index/1016971">2.1.4进程之间的通信</a> <a href="/Article/Index/647090">移动通信网络规划：室内分布系统的分类</a> <a href="/Article/Index/1162402">缓存穿透、缓存击穿、缓存雪崩及其解决方案</a> <a href="/Article/Index/666805">聚合函数--</a> <a href="/Article/Index/1085835">linux提权辅助工具Linux_Exploit_Suggester(三种工具)</a> <a href="/Article/Index/848872">Win10杀死进程方式</a> <a href="/Article/Index/642512">【花雕体验】12 搭建ESP32C3之Arduino开发环境</a> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/SquirrelPineal/article/details/125884500 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a>    <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" />京公网安备 11010502049817号</a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>