使用ipcRenender和ipcmain将消息从preload.js发送到main.js时出现问题

f2uvfpb9  于 2022-09-18  发布在  Java
关注(0)|答案(2)|浏览(175)

我是电子桌面应用程序开发的初学者，当我尝试使用ipcRenender和ipcMain将消息从预加载脚本发送到main.js时。js中的以下详细信息显示在VScode终端中，没有任何事情发生(没有事件发生)，甚至sole.log都不起作用

{
  preventDefault: [Function: preventDefault],
  sender: EventEmitter {
    isDestroyed: [Function: isDestroyed],
    destroy: [Function: destroy],
    getBackgroundThrottling: [Function: getBackgroundThrottling],
    setBackgroundThrottling: [Function: setBackgroundThrottling],
    getProcessId: [Function: getProcessId],
    getOSProcessId: [Function: getOSProcessId],
    equal: [Function: equal],
    _loadURL: [Function: _loadURL],
    reload: [Function: reload],
    reloadIgnoringCache: [Function: reloadIgnoringCache],
    downloadURL: [Function: downloadURL],
    getURL: [Function: getURL],
    getTitle: [Function: getTitle],
    isLoading: [Function: isLoading],
    isLoadingMainFrame: [Function: isLoadingMainFrame],
    isWaitingForResponse: [Function: isWaitingForResponse],
    stop: [Function: stop],
    canGoBack: [Function: canGoBack],
    goBack: [Function: goBack],
    canGoForward: [Function: canGoForward],
    goForward: [Function: goForward],
    canGoToOffset: [Function: canGoToOffset],
    goToOffset: [Function: goToOffset],
    canGoToIndex: [Function: canGoToIndex],
    goToIndex: [Function: goToIndex],
    getActiveIndex: [Function: getActiveIndex],
    clearHistory: [Function: clearHistory],
    length: [Function: length],
    isCrashed: [Function: isCrashed],
    forcefullyCrashRenderer: [Function: forcefullyCrashRenderer],
    setUserAgent: [Function: setUserAgent],
    getUserAgent: [Function: getUserAgent],
    savePage: [Function: savePage],
    openDevTools: [Function: openDevTools],
    closeDevTools: [Function: closeDevTools],
    isDevToolsOpened: [Function: isDevToolsOpened],
    isDevToolsFocused: [Function: isDevToolsFocused],
    enableDeviceEmulation: [Function: enableDeviceEmulation],
    disableDeviceEmulation: [Function: disableDeviceEmulation],
    toggleDevTools: [Function: toggleDevTools],
    inspectElement: [Function: inspectElement],
    setIgnoreMenuShortcuts: [Function: setIgnoreMenuShortcuts],
    setAudioMuted: [Function: setAudioMuted],
    isAudioMuted: [Function: isAudioMuted],
    isCurrentlyAudible: [Function: isCurrentlyAudible],
    undo: [Function: undo],
    redo: [Function: redo],
    cut: [Function: cut],
    copy: [Function: copy],
    paste: [Function: paste],
    pasteAndMatchStyle: [Function: pasteAndMatchStyle],
    delete: [Function: delete],
    selectAll: [Function: selectAll],
    unselect: [Function: unselect],
    replace: [Function: replace],
    replaceMisspelling: [Function: replaceMisspelling],
    findInPage: [Function: findInPage],
    stopFindInPage: [Function: stopFindInPage],
    focus: [Function: focus],
    isFocused: [Function: isFocused],
    sendInputEvent: [Function: sendInputEvent],
    beginFrameSubscription: [Function: beginFrameSubscription],
    endFrameSubscription: [Function: endFrameSubscription],
    startDrag: [Function: startDrag],
    attachToIframe: [Function: attachToIframe],
    detachFromOuterFrame: [Function: detachFromOuterFrame],
    isOffscreen: [Function: isOffscreen],
    startPainting: [Function: startPainting],
    stopPainting: [Function: stopPainting],
    isPainting: [Function: isPainting],
    setFrameRate: [Function: setFrameRate],
    getFrameRate: [Function: getFrameRate],
    invalidate: [Function: invalidate],
    setZoomLevel: [Function: setZoomLevel],
    getZoomLevel: [Function: getZoomLevel],
    setZoomFactor: [Function: setZoomFactor],
    getZoomFactor: [Function: getZoomFactor],
    getType: [Function: getType],
    _getPreloadPaths: [Function: _getPreloadPaths],
    getLastWebPreferences: [Function: getLastWebPreferences],
    getOwnerBrowserWindow: [Function: getOwnerBrowserWindow],
    inspectServiceWorker: [Function: inspectServiceWorker],
    inspectSharedWorker: [Function: inspectSharedWorker],
    inspectSharedWorkerById: [Function: inspectSharedWorkerById],
    getAllSharedWorkers: [Function: getAllSharedWorkers],
    _print: [Function: _print],
    _printToPDF: [Function: _printToPDF],
    _setNextChildWebPreferences: [Function: _setNextChildWebPreferences],
    addWorkSpace: [Function: addWorkSpace],
    removeWorkSpace: [Function: removeWorkSpace],
    showDefinitionForSelection: [Function: showDefinitionForSelection],
    copyImageAt: [Function: copyImageAt],
    capturePage: [Function: capturePage],
    setEmbedder: [Function: setEmbedder],
    setDevToolsWebContents: [Function: setDevToolsWebContents],
    getNativeView: [Function: getNativeView],
    incrementCapturerCount: [Function: incrementCapturerCount],
    decrementCapturerCount: [Function: decrementCapturerCount],
    isBeingCaptured: [Function: isBeingCaptured],
    setWebRTCIPHandlingPolicy: [Function: setWebRTCIPHandlingPolicy],
    getWebRTCIPHandlingPolicy: [Function: getWebRTCIPHandlingPolicy],
    takeHeapSnapshot: [Function: takeHeapSnapshot],
    setImageAnimationPolicy: [Function: setImageAnimationPolicy],
    _getProcessMemoryInfo: [Function: _getProcessMemoryInfo],
    id: 1,
    session: [Getter],
    hostWebContents: [Getter],
    devToolsWebContents: [Getter],
    debugger: [Getter],
    mainFrame: [Getter],
    _windowOpenHandler: null,
    _events: [Object: null prototype] {
      '-ipc-message': [Function (anonymous)],
      '-ipc-invoke': [Function (anonymous)],
      '-ipc-message-sync': [Function (anonymous)],
      '-ipc-ports': [Function (anonymous)],
      crashed: [Function (anonymous)],
      'render-process-gone': [Function (anonymous)],
      'devtools-reload-page': [Function (anonymous)],
      '-new-window': [Function (anonymous)],
      '-will-add-new-contents': [Function (anonymous)],
      '-add-new-contents': [Function (anonymous)],
      login: [Function (anonymous)],
      'ready-to-show': [Function (anonymous)],
      'select-bluetooth-device': [Function (anonymous)]
    },
    _eventsCount: 13
  },
  frameId: 1,
  processId: 4,
  reply: [Function (anonymous)]
}

单击按钮时，将调用预加载中的函数，该函数将向主进程发送消息

Renderer.js

button.addEventListener('click', function() {
    window.LoadProductWindow.load();
});

Preload.js

const {
    contextBridge,
    electron,
    ipcRenderer
} = require('electron')

contextBridge.exposeInMainWorld('LoadProductWindow', {
    load: () => ipcRenderer.send('load_product_window')
})

Main.js

ipcMain.on('load_product_window', () => {
    console.log('received')
});

请解决我的问题，我也想添加一个新的窗口上的按钮，以添加新的项目，我怎么做呢？

谢谢

JavaScript

2条答案

按热度按时间
tct7dpnv

tct7dpnv1#

毫无疑问，许多说明Electron的Inter-Process Communication和preload.js用法的例子都很复杂，很难理解。一旦你对Context-Isolation有了一个明确的理解，事情就会开始变得井然有序。

我最近发现的主要问题是，许多人正在用他们的preload.js脚本打破Separation of Concerns设计原则。虽然这不是一个严格的规则，但通过将所有逻辑移出preload.js脚本而不是纯通信逻辑，简化preload.js脚本可以生成非常简单、可读的代码。

首先，让我们定义一个简单易读的preload.js脚本。

在此脚本中，您将找到一个包含3个数组(send、receive和sendReceive)的ipc对象，您可以在其中定义white-listed通道名称。当从主线程或呈现线程调用时，它们将不受阻碍地通过。使用的任何和所有其他未在这3个数组中定义的频道名称都将被阻止。

在这里，我将通道名productWindow:load添加到send(从渲染到主线程)数组。

preload.js(主线程)

'use strict';

// Import the necessary Electron components.
const contextBridge = require('electron').contextBridge;
const ipcRenderer = require('electron').ipcRenderer;

// White-listed channels.
const ipc = {
    'render': {
        // From render to main.
        'send': [
            'productWindow:load'
        ],
        // From main to render.
        'receive': [],
        // From render to main and back again.
        'sendReceive': []
    }
};

// Exposed protected methods in the render process.
contextBridge.exposeInMainWorld(
    // Allowed 'ipcRenderer' methods.
    'ipcRender', {
        // From render to main.
        send: (channel, args) => {
            let validChannels = ipc.render.send;
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, args);
            }
        },
        // From main to render.
        receive: (channel, listener) => {
            let validChannels = ipc.render.receive;
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender`.
                ipcRenderer.on(channel, (event, ...args) => listener(...args));
            }
        },
        // From render to main and back again.
        invoke: (channel, args) => {
            let validChannels = ipc.render.sendReceive;
            if (validChannels.includes(channel)) {
                return ipcRenderer.invoke(channel, args);
            }
        }
    }
);

接下来，我们将快速定义您的index.html文件，该文件将包括在按下按钮时向主线程发送IPC消息的Java脚本功能。

index.html(渲染线程)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Main Page</title>
    </head>

    <body>
        <label for="button">Product Window: </label>
        <input type="button" id="button" value="Load Now">
    </body>

    <script>
        document.getElementById('button').addEventListener('click', () => {
            window.ipcRender.send('productWindow:load');
        })
    </script>
</html>

product.html(渲染线程)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Product Page</title>
    </head>

    <body>
        <h1>It Works..!</h1>
    </body>
</html>

最后，在main.js脚本(应用程序的入口点)中，我们使用Electron的ipcMain模块，特别是ipcMain.on()方法，通过productWindow:load通道监听消息。

main.js(主线程)

const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;
const electronIpcMain = require('electron').ipcMain;

const nodePath = require("path");

let mainWindow;
let productWindow;

function createMainWindow() {
    const mainWindow = new electronBrowserWindow({
        x: 0,
        y: 0,
        width: 800,
        height: 600,
        show: false,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            preload: nodePath.join(__dirname, 'preload.js')
        }
    });

    mainWindow.loadFile('index.html')
        .then(() => { mainWindow.show(); });

    return mainWindow;
}

function createProductWindow(parentWindow) {
    const productWindow = new electronBrowserWindow({
        x: 0,
        y: 0,
        width: 800,
        height: 600,
        parent: parentWindow,
        show: false,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            preload: nodePath.join(__dirname, 'preload.js')
        }
    });

    productWindow.loadFile('product.html')
        .then(() => { productWindow.show(); });

    return productWindow;
}

electronApp.on('ready', () => {
    mainWindow = createMainWindow();
});

// Let's listen for the 'productWindow:load' signal.
electronIpcMain.on('productWindow:load', () => {
    productWindow = createProductWindow(mainWindow);
});

electronApp.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        electronApp.quit();
    }
});

electronApp.on('activate', () => {
    if (electronBrowserWindow.getAllWindows().length === 0) {
        createMainWindow();
    }
});

随着您的电子应用程序开始增长，您将想要开始将您的main.js文件拆分成更小的文件，以“分离您的关注点”。即：将不同的窗口创建代码段移动到它们自己的文件中，包括它们相关的IPC代码。

这将改进您的代码结构，简化可读性，并有助于形成可维护的代码库。

赞(0）分享  回复(0）举报  2022-09-18
7hiiyaii

7hiiyaii2#

发送给IPC的消息中的第一个参数是Event对象，要获取对象，您需要这样做

ipcMain.on('myMessage',(event, myObj) => {
    console.log(myObj)
});
赞(0）分享  回复(0）举报  2022-09-18
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com