Electron 浏览器视图和预加载 JavaScript 问题答案

【问题标题】：Electron Browserview and Preload JavaScript ProblemsElectron 浏览器视图和预加载 JavaScript 问题
【发布时间】：2020-05-26 09:27:48
【问题描述】：

我已经通过 Electron Fiddle 尝试了几个版本，但我无法让电子浏览器视图与预加载的 javascript 文件一起使用。我关注了Electron BrowserView not capturing mouse events， Preload script not loading in electron@5.0.0 browserview，以及我可以在 browserview 和预加载的 javascript 上读到的任何其他内容。我可以让预加载的 javascript 从浏览器窗口运行，但不能从浏览器视图运行。我已经尝试了所有的 webpreferences 选项，并确保路径是正确的。没有。我的问题是：任何人都可以提供一些他们已经开始工作的框架代码吗？或者暗示我正在尝试做的事情甚至是可能的。这是我使用的一些代码。就像我之前提到的，它可以从浏览器窗口工作，但不能从浏览器视图工作，没有任何东西输出到控制台。谢谢。

我想让它适用于 Electron v8.0.0

main.js

const path = require('path');
const { BrowserView, BrowserWindow, app } = require('electron')

app.on('ready', () => {
  let win = new BrowserWindow({ width: 800, height: 600 });
  win.on('closed', () => { win = null });

  const view = new BrowserView();
  win.setBrowserView(view);
  view.setBounds({ x: 0, y: 0, width: 800, height: 600, 
     webPreferences: { devTools: true, contextIsolation: true, preload: path.join(app.getAppPath(), 'preload.js') } });
  view.webContents.loadURL('https://electronjs.org');
  view.webContents.openDevTools({mode:'undocked'});
});

preload.js

const { webFrame } = require('electron');

webFrame.executeJavaScript('window.foo = "foo";');
window.bar = 'bar';

document.addEventListener('DOMContentLoaded', () => {
 // Will log out 'undefined' since window.foo is only available in the main
 // context
  console.log(window.foo);

  // Will log out 'bar' since window.bar is available in this context
  console.log(window.bar);
});

【问题讨论】：

为了复制这个：你用的是什么电子版本？
电子 v8.0.0.我还编辑了帖子以指示版本。我已经尝试了从 5.0.0 到 beta 的所有版本
你找到出路了吗？我也卡在这里了

标签： electron

【解决方案1】：

const view = new BrowserView({
  webPreferences: { 
    devTools: true, 
    contextIsolation: true, 
    preload: path.join(app.getAppPath(), 'preload.js') 
  }
});
win.setBrowserView(view);
view.setBounds({ x: 0, y: 0, width: 800, height: 600 });

webPreferences 应该在 BrowserView 的选项中

【讨论】：

【解决方案2】：

您必须将预加载文件放在静态文件夹中并像这样调用它 file:${require('path').resolve(__static, './preload.js')} 为我工作...... 但预加载文件不会在多浏览器视图上加载或 webview 在第一帧只运行一次，可能是一些错误.....非常可悲的行为

【讨论】：

【解决方案3】：

也花了我一段时间... 我正在使用 electron-webpack，在它上面我有以下配置设置（你可能可以使用裸 webpack 和额外条目实现相同的设置）：

"main": {
  "extraEntries": ["@/preload.js"]
}

在创建浏览器视图时：

const view = new BrowserView({
  webPreferences: {
    preload: path.resolve(__dirname, 'preload.js'),
    #some other options
}})

预加载脚本包含主进程的所有源（无论您为其配置了什么）

【讨论】：