如何在电子中正确使用preload.js
我试图在我的渲染器进程中使用节点模块（在本例中为fs），如下所示：
// main_window.js
const fs = require('fs')
function action() {
console.log(fs)
}
注意：操作功能在我按下主窗口中的按钮时被调用
但这给出了一个错误：
Uncaught ReferenceError: require is not defined
at main_window.js:1
我可以解决这个问题，正如这个公认的答案所建议的那样，通过将这些行添加到我的main中。js初始化主窗口时：
// main.js
main_window = new BrowserWindow({
width: 650,
height: 550,
webPreferences: {
nodeIntegration: true
}
})
但是，根据文档，这不是最好的方法，相反，我应该创建一个preload.js文件，并在那里加载这些节点模块，然后在我所有的渲染器进程中使用它。像这样：
main。js：
main_window = new BrowserWindow({
width: 650,
height: 550,
webPreferences: {
preload: path.join(app.getAppPath(), 'preload.js')
}
})
预加载。js：
const fs = require('fs')
window.test = function() {
console.log(fs)
}
主窗口。js：
function action() {
window.test()
}
而且它有效！
现在我的问题是，我应该在preload中编写（因为只有在渲染器进程的大部分代码，这不是违反直觉的吗。jspreload.js中我才能访问节点模块），然后只调用每个渲染器中的函数。js文件（例如这里，main_window.js）？我在这里不明白什么？
共有3个答案
并不是官方文档中的所有内容都可以在代码的任何地方直接实现。您必须对环境和流程有简明的了解。
电子技术发展很快，引起了一些混乱。最新的惯用例子（在咬牙切齿之后我能确定的最好例子）是：
主要的js
app.whenReady().then(() => {`
let mainWindow = new BrowserWindow({`
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true
},
width:640,
height: 480,
resizable: false
})
... rest of code
预加载。js
const { contextBridge, ipcRenderer} = require('electron')
contextBridge.exposeInMainWorld(
'electron',
{
sendMessage: () => ipcRenderer.send('countdown-start')
}
)
renderer.js
document.getElementById('start').addEventListener('click', _ => {
window.electron.sendMessage()
})
正如另一位用户所问，让我在下面解释我的答案。
在电子中使用preload.js的正确方法是在应用可能需要要求的任何模块周围公开白名单包装器。
就安全性而言，公开require或通过require调用在预加载中检索的任何内容都是危险的。js（更多解释请参见我的评论）。如果你的应用程序加载了远程内容，这一点尤其正确，很多应用程序都会加载远程内容。
为了把事情做好，您需要在浏览器窗口上启用许多选项，我将在下面详细介绍。设置这些选项将强制您的electron应用程序通过IPC（进程间通信）进行通信，并将两个环境彼此隔离。通过这样设置应用程序，您可以验证后端中可能是require'd模块的任何内容，而客户端不会对其进行篡改。
下面，您将找到一个简短的例子，说明我所说的以及它在您的应用程序中的外观。如果你从新开始，我可能会建议使用安全电子模板（我是它的作者），它在构建电子应用程序时从一开始就包含了所有这些安全最佳实践。
此页面还提供了使用preload.js制作安全应用时所需的体系结构的详细信息。
主要的js
const {
app,
BrowserWindow,
ipcMain
} = require("electron");
const path = require("path");
const fs = require("fs");
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;
async function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false, // is default value after Electron v5
contextIsolation: true, // protect against prototype pollution
enableRemoteModule: false, // turn off remote
preload: path.join(__dirname, "preload.js") // use a preload script
}
});
// Load app
win.loadFile(path.join(__dirname, "dist/index.html"));
// rest of code..
}
app.on("ready", createWindow);
ipcMain.on("toMain", (event, args) => {
fs.readFile("path/to/file", (error, data) => {
// Do something with file contents
// Send result back to renderer process
win.webContents.send("fromMain", responseObj);
});
});
预加载。js
const {
contextBridge,
ipcRenderer
} = require("electron");
// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
contextBridge.exposeInMainWorld(
"api", {
send: (channel, data) => {
// whitelist channels
let validChannels = ["toMain"];
if (validChannels.includes(channel)) {
ipcRenderer.send(channel, data);
}
},
receive: (channel, func) => {
let validChannels = ["fromMain"];
if (validChannels.includes(channel)) {
// Deliberately strip event as it includes `sender`
ipcRenderer.on(channel, (event, ...args) => func(...args));
}
}
}
);
指数html
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<title>Title</title>
</head>
<body>
<script>
window.api.receive("fromMain", (data) => {
console.log(`Received ${data} from main process`);
});
window.api.send("toMain", "some data");
</script>
</body>
</html>
-
问题内容： 我已经尝试通过库成功使用OAuth进行身份验证。 从客户端重定向回后，我发送成功 我发现什么都没有告诉电子邮件部分（为空）： 第一个问题 ，如何正确获取电子邮件？无需使用Google+ API。 编辑＃2 我尝试将另一个用于： 并尝试使用较新的API检索电子邮件： 但它给 编辑＃3 我尝试使用另一个范围： 并尝试使用以下URL检索电子邮件： 但它仍然像以前一样为空。 第二个问题 ，我可
-
我试图在react with typescript中创建一个登录表单。但setEmail方法不接受该值。它表示“string”类型的参数不能分配给“SetStateAction”类型的参数。我该怎么解决它？
-
2-我在FlatList中实现分页，所以当用户到达数据列表的末尾时，我调用一个函数来增加当前页，并根据当前页更新的情况，再次提取，因为我将to useEffect传递给依赖项数组 所以这里的问题是应该将以前的数据与新数据联系起来，所以我使用方法， 它工作得很好，但有时我收到一个警告，告诉我有一个重复的数据，当我使用扩展时不工作，我得到一个很大的错误，因为Flatlist keyExtractor问
-
我试图让我的应用程序向电子邮件发送一个新密码，但它会打开一个页面并给出消息“没有应用程序可以执行此操作”，标题为“发送电子邮件”（我知道我有），为什么？我想要一个新密码的想法，但首先我想向编辑文本中键入的电子邮件发送任何内容以进行测试。我尝试过在真实设备上运行它。 编辑：
-
我试图熟悉JavaScript中的函数式编程。我刚读到指针函子是： 具有of函数的对象，可将任何单个值放入其中。 ES2015添加了一个rray.of使数组成为一个指向的仿函数。 我的问题是“单一价值”到底是什么意思？ 我想做一个函数/容器（像https://drboolean.gitbooks.io/mostly-adequate-guide/content/ch8.html），它持有给定维度（
-
问题内容： 在最新版本（v0.31.0）中，电子附带了静态链接的FFMpeg库（不是命令行工具，请参见＃2588） 我知道很多用于ffmpeg的nodejs模块，但是它们看起来都像是命令行工具的api，那么理想情况下我该如何访问与电子捆绑在一起的ffmpeg库并编码流？ 问题答案： 当前这是不可能的，因为没有针对Node.js的不错的库。意思是，只有这样抽象了CLI。但是，可以将其编译和链接为节点