electron中，如何在其它自定义的JS中得到MAIN.JS中的变量

源码资源网

electron中，如何在其它自定义的JS中得到MAIN.JS中的变量
在 Electron 中， `main.js`  和渲染进程中的 JavaScript 代码是分开的，彼此之间不能直接访问变量。不过，你可以通过 IPC（进程间通信）来实现它们之间的通信。
以下是一个简单的示例，展示如何在渲染进程中获取  `main.js`  中的变量：
1. **在  `main.js`  中定义变量并设置 IPC 通信**：

1. const { app, BrowserWindow, ipcMain } = require('electron');
   
2. let mainVariable = "Hello from main.js";
   
3. function createWindow() {
   
4.     const win = new BrowserWindow({
   
5.         width: 800,
   
6.         height: 600,
   
7.         webPreferences: {
   
8.             contextIsolation: true,
   
9.             enableRemoteModule: false,
   
10.             preload: path.join(__dirname, 'preload.js') // 使用 preload.js 来安全地暴露 API
    
11.         }
    
12.     });
    
13.      win.loadFile('index.html');
    
14. }
    
15. app.whenReady().then(createWindow);
    
16. // 监听渲染进程的请求
    
17. ipcMain.handle('get-main-variable', () => {
    
18.     return mainVariable; // 返回 main.js 中的变量
    
19. });

复制代码

2. **在  `preload.js`  中设置安全的 API**：

1. const { contextBridge, ipcRenderer } = require('electron');
   
2. contextBridge.exposeInMainWorld('api', {
   
3.     getMainVariable: () => ipcRenderer.invoke('get-main-variable')
   
4. });

复制代码

3. **在渲染进程的 JavaScript 中获取变量**：

1. async function fetchMainVariable() {
   
2.     const mainVariable = await window.api.getMainVariable();
   
3.     console.log(mainVariable); // 输出: Hello from main.js
   
4. }
   
5. fetchMainVariable();

复制代码

通过这种方式，你可以安全地从  `main.js`  中获取变量。确保使用  `contextBridge`  和  `ipcRenderer`  来避免直接暴露 Node.js 的 API，这样可以提高安全性。



如果你想在与  `main.js`  同级目录下的自定义 JavaScript 文件中访问  `main.js`  中的变量，通常是通过模块导出和导入来实现的。以下是一个示例，展示如何在  `main.js`  中定义变量，并在同级目录下的自定义 JS 文件中访问它。
### 1. 在  `main.js`  中定义变量并导出

1. // main.js
   
2. const { app, BrowserWindow } = require('electron');
   
3. let mainVariable = "Hello from main.js";
   
4. function createWindow() {
   
5.     const win = new BrowserWindow({
   
6.         width: 800,
   
7.         height: 600,
   
8.         webPreferences: {
   
9.             contextIsolation: true,
   
10.             enableRemoteModule: false,
    
11.             preload: path.join(__dirname, 'preload.js')
    
12.         }
    
13.     });
    
14.     win.loadFile('index.html');
    
15. }
    
16. app.whenReady().then(createWindow);
    
17. // 导出变量
    
18. module.exports = { mainVariable };

复制代码

### 2. 在自定义 JS 文件中导入  `main.js`  的变量
假设你有一个自定义的 JS 文件  `custom.js` ，你可以这样导入  `main.js`  中的变量：

1. // custom.js
   
2. const { mainVariable } = require('./main');
   
3. console.log(mainVariable); // 输出: Hello from main.js

复制代码

### 注意事项
1. **模块导出**：使用  `module.exports`  将变量导出，以便在其他文件中使用  `require`  导入。
2. **路径**：确保在  `require`  中使用正确的相对路径。
3. **Electron 进程**：请注意， `main.js`  是主进程，而  `custom.js`  也应该在主进程中运行。如果你在渲染进程中使用  `custom.js` ，则无法直接访问  `main.js`  中的变量。
通过这种方式，你可以在同级目录下的自定义 JavaScript 文件中访问  `main.js`  中的变量。