electron webview iframe执行preload (nodeintegrationinsubframes)_iframe preload

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
解决方案：

在主线程 main.js 中需要打开权限 nodeIntegrationInSubFrames: true
在页面标签中也需要打开权限 nodeintegrationinsubframes
main.js
async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: true,
      // 使用webview
      webviewTag: true,
      // 取消跨域限制
      webSecurity: false,
      // 支持多线程
      nodeIntegrationInWorker: true,
      nodeIntegrationInSubFrames: true, //放开权限
      // plugins: true,
      // allowDisplayingInsecureContent: true
  win.openDevTools()
  win.loadURL('file://' + __dirname + '/ui/index.html');
index.html 
<webview id="link-view" src="https://www.sinopecsales.com" preload="js/inject.js" 
      nodeintegration nodeintegrationinsubframes allowpopups disablewebsecurity plugins class="webview"></webview>
微信群大佬都在等着你 
微信扫描二维码加入微信群，交流学习，及时获取代码最新动态。 
                                    跨文档通信是指在一个 HTML 文档中的页面与嵌入的 iframe 中的页面之间进行数据交换和通信。需要注意的是，在 Electron 应用程序中，为了保证安全性，需要进行一些额外的安全性检查和控制，例如验证消息的来源和内容。在主页面中，我们将嵌入一个 iframe，用于加载子页面，并实现跨文档通信。在控制台中，你将看到主页面和子页面之间互相发送和接收的消息。中，我们将嵌入一个 iframe，并使用 Electron 的 IPC 机制与子页面进行通信。对象来监听来自子页面的消息，并使用。
在渲染器过程中导入。
 import moment from 'moment' ;
import PromiseQueue from 'electron-webview-schedule/lib/promise-queue' ;
import WebviewSchedule from 'electron-webview-schedule/lib/webview-schedule' ;
const webviewSchedule = new WebviewSchedule ( {
  container : document . body ,
  queue : new PromiseQueue ( 1 ) ,
                                    X-Frame-Options
X-Frame-Options 响应头是用来给浏览器指示允许一个页面 可否在 <frame>,<iframe>,<embed>或者<object>中展现的标记。站点可以通过确保网站没有被嵌入到别人的站点里面，从而避免点击劫持攻击。
防御点击劫持。如果恶意的站点将你的网页嵌入iframe标签中，然后诱使用户在该站点上进行操作，此时用户将在不知情的情况下点击透明的iframe页面，从而诱使用户恰好点击在ifram...
                                    沙箱属性的值将被简单地沙箱化(然后应用所有限制)，或者以空格分隔的预定义值列表将消除实际限制。支持的浏览器：下面列出了HTML video preload属性支持的浏览器。sandbox属性允许对iframe中的内容进行其他限制。
                                    微前端架构具备以下几个核心价值：技术栈无关。主框架不限制接入应用的技术栈，微应用具备完全自主权独立开发、独立部署。微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新增量升级。在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略独立运行时。每个微应用之间状态隔离，运行时状态不共享中心化路由。主应用统一注册子应用，统一管理各个子应用的路由一致的开发体验。 开发者在微前端下开发子应用，和平时开发其它 Web 应用没有太大区
                                    作为网页内容的一部分，图像和视频通常要消耗很多资源加载。要提高网页应用的性能，如何避免资源浪费在加载图像和视频上就很重要了。但是，很多时候我们都不愿意减少网页上的媒体资源，所以我们经常无从下手。幸运的是，我们有懒加载这个绝招，它可以帮助我们减少加载时间和降低负载，而不在内容上偷工减料。什么是懒加载？懒加载是一种在页面加载时延迟加载一些非关键资源的技术，换句话说就是按需加载。对于图片来说，非关键通常...
其中使用<webview>标签，src引入需要内嵌的web页面路径，可以是本地文件，也可以是远程请求，例如src=“https://www.douyin.com/”，引入抖音官网主页
然后通过<script>引入渲染脚本
2.主窗口主进程入口文件main.js
该文件中，创建主窗口，并在创建过程中 通过设置webPref.
                                    使用 Electron 很重要的一点是要理解 Electron 不是一个 Web 浏览器。它允许您使用熟悉的 Web 技术构建功能丰富的桌面应用程序，但是您的代码具有更强大的功能。JavaScript 可以访问文件系统，用户 shell 等。这允许您构建更高质量的本机应用程序，但是内在的安全风险会随着授予您的代码的额外权力而增加。
                                    注意：本文基于electron-vue项目（在vue2项目上运行vue add electron-builder命令搭建而成）
并在electron8.5.5及9.0.0测试过
在webview中开发者可以使用preload预加载并执行js文件 官方文档
网上以及官方的很多例子都是传入一个相对路径的String，并没有以file://开头。然而我这里只能传入String字符串并且是file协议的，electron会检测是不是以file://开头，不符合就会报错（不知道是不是我配置有问题还是啥…反正只要不以
第一个方案决定使用 iframe 加载第三方 web 登录网址。但是发现当页面点击登录重定向到二级过度登录页面时，会报跨域的错误。
于是决定尝试使用 webview 来内嵌这个第三方登录页面。
electron : 10.0.1
vue : 2.5.16
1、在主进程里需要允许主窗口使用 webviewTag：
const win = new Browser({
webPreferences: {
                                    英文 |https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/翻译 | web前端开发(ID：web_qdkf)由于图像是Web上最流行也是必不可少的内容类型之一，因此网站上的图片页面加载时间很容易成为一个问题。即使进行了适当的优化，图像也可能占很大的比重。这可能会对访问网站的用户造...
                                    对浏览器加载资源有很多不确定性，例如：css/font的资源的优化级会比img高，资源的优化级是怎么确定的呢？资源优先级又是如何影响加载的先后顺序的？有几种情况可能会导致资源被阻止加载？通过源码可以找到答案。此次源码解读基于Chromium 64（10月28日更新的源码）。下面通过加载资源的步骤，依次说明。1. 开始加载通过以下命令打开Chromium，同时打开一个网页：chromium --re...
                                    什么是前端性能
它是一个跨功能需求，优化的方式有很多种，可以将其总结分为俩大类，第一类是运行环境的优化，如【网络、服务器资源】等，第二类为代码级别的优化，例如js中DOM操作优化，css选择器优化，图片优化以及HTML结构优化等等。
理解影响性能的关键因素
带宽(流量、流量控制)
DNS解析
TCP/TLS（安全传输层协议）