問題描述

我將嘗試用簡短的段落描述一個最小化的問題.

I'll try to describe a minimized question in short paragraphs.

簡而言之，我想在我的電子應用程序 in 的網頁中使用我的電子應用程序中的一些邏輯或調用一些函數(我實際上正在為我的網頁包裝一個電子應用程序外殼").

In short, I want to use some logic or call some functions in my Electron App from the webpage that is in my Electron App (I am actually wrapping an electron app 'shell' for my webpage).

假設我想在我的 Electron 應用程序中公開一個函數.說，

Suppose I want to expose a function in my Electron app. Say,

function printNumbers () {
  console.log(1)
}

注意它應該位于我的 Electron 代碼中.

notice that it should be located in my Electron code.

然后在運行我的應用程序后，我想從我的網頁調用此函數(單擊從網站加載的網頁中的按鈕，然后在我的 Electron 應用程序中打開一個新窗口).現在，我想我可以使用開發人員控制臺檢查 printNumber 是否有效.

Then after running my app, I'd like to call this function from my webpage(clicking a button in my webpage which is loaded from a website, then open a new window in my Electron App). For now, I think I can check whether printNumber works by using the developer console.

我已經檢查了如何使用 remote 模塊來調用電子內部的函數/模塊.但是我沒有找到一種方法來調用我在電子代碼庫中編寫的函數.

I have checked how to use remote module to call functions/modules inside electron. But I didn't find a way to call a function I write in my electron code base.

順便說一句:我可以啟用 nodeIntegration 選項.

BTW: I can enable the nodeIntegration option.

推薦答案

渲染器進程和主進程之間的通信主要有兩種方式.

There are two main ways to communicate between the renderer process and the main process.

1. 一種方法是使用 remote 模塊需要你想從主進程中獲取的代碼.該對象將包含您從主流程代碼中導出的任何內容.

1. One way would be to use the remote module to require the code you want to take from the main process. This object will contain anything you export from your main process code.

// main process, for example app/main.js
exports.test = () => console.log('Yay');

// renderer process, for example app/renderer.js
const { remote } = require('electron');
const mainProcess = remote.require('./main.js');

mainProcess.test(); // 'Yay'

2. 另一種方法是使用 進程間通信 在主進程和渲染進程之間發送/接收事件:

2. Another way would be to use Inter Process Communication to send/receive events between the main process and the renderer process:

// main process, for example app/main.js
myWindow.webContents.send('my-cool-log-event', 'Yay');

// renderer process, for example app/renderer.js
const { ipcRenderer } = require('electron');
ipcRenderer.on('my-cool-log-event', (evt, msg) => console.log(msg)); // 'Yay'

如果您想在渲染器進程中觸發點擊事件時從主進程調用函數，您可以使用任一方法.

If you want to call a function from the main process when a click event fires in a renderer process, you can use either approach.

1.

// main process, for example app/main.js
exports.onClick = () => console.log('Yay');

// renderer process, for example app/renderer.js
const { remote } = require('electron');
const mainProcess = remote.require('./main.js');

document
  .querySelector('#elem')
  .addEventListener('click', () => {
    mainProcess.onClick();
  });

2.

// main process, for example app/main.js
const { ipcMain } = require('electron')
ipcMain.on('click', () => console.log('do something'));

// renderer process, for example app/renderer.js
const { ipcRenderer } = require('electron');

document
  .querySelector('#elem')
  .addEventListener('click', () => {
    ipcRenderer.send('click');
  });

這篇關于如何從我的網頁調用 Electron 中的函數/模塊?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！