Electron BrowserView 加载第三方网页

使用背景：最近的项目中需要在electron中加载第三方网页，并且需要向第三方网页传入token等认证信息，但是因为安全问题加上长token的原因不能再地址栏进行传递，最开始使用iframe加载通过postMessage的方式进行传递，但是体验上很不好，iframe交互的过程会存在一定的延迟，最后查看Electron文档https://www.electronjs.org/，找到了Webview的方式进行加载，npm上也有react对应的一个包react-electron-web-view，具体使用方式如下：

preload 是WebView提供的一个注入方法，它可以向加载的第三方网页window上挂在一个自定义对象，目标页面可以直接从window上获取该js上定义的方法和变量，我本地preload.js如下,可根据项目需求自行配置

你以为这样就完了吗？

当我充满信心的将项目进行打包给其他项目组使用，随机而来的也是一波问题反馈，

问题：

1.页面存在缓存问题，第三方页面部署了新的代码，但是刷新过后，webView嵌套他们更新后的地址，内容并没有更新，必须强行清除本地缓存文件才行

2.第三方页面的input输入框焦点问题，偶现

带着他们反馈的问题，我头都大了，这是为什么呢，抱着疑问继续研究electron官网文档，说实话electron中文文档真不咋地。最终在我不断地翻墙，查阅资料。并实践出一个特别适用的方案，BrowserView，其实官网一开始就建议我们不要用webview，只是当时没注意，只图完成工作任务，

BrowserView其实是electron窗口里面的内嵌窗口，它也是官方建议的第三方页面内嵌方案，但是需要自己计算坐标，以及页面宽高适配。不多说，直接上代码

1.首先我们需要提前创建好我们需要的内嵌窗口容器，

在主进程中创建好父窗口后，创建你的BrowserView 可以创建多个，目前我只需要一个。

preload 预加载文件，必须使用绝对路径

因为初始化我不想让它展示，所以坐标以及宽高我都设置的默认为0，这样也达到了隐藏的效果

2.在main.ts 主进程监听两个方法，用于开启和关闭BrowserView

3.组件里面使用

通过上面的方案，成功的解决了第三方页面加载的各种问题，无论是加载速度，还是页面稳定性都比iframe和webview好太多了。如果大家还有更好的方案，希望留言，大家一起交流学习，