electron 如何将一个变量从电子html文件发送到javascript文件？

5m1hhzi4 于 2023-03-06 发布在 Electron

关注(0)|答案(1)|浏览(179)

我试图从html文档的表单中获取一个数字输入，然后将其发送到javascript文档和console.log中。即使在尝试调试和尝试多个版本时，它仍然无法工作。

HTML文档：

<form id="searchForm" onsubmit="search(event)" class="nodrag">
    <input type="text" id="searchBar" placeholder="COMING SOON">
    <input type="submit" value="O-">
</form>
<script src="index.js"></script>
<script>
    function search(event) {
        event.preventDefault();

        const query = document.getElementById('searchBar').value;
        ipcRenderer.send('search-query', query);
    }
</script>

索引.JS：

const {ipcMain, app, BrowserWindow, remote } = require('electron');
let num = 0;

//code to create electron window

const checkForUpdates = () => {
    ipcMain.on('search-query', (query) => {
        console.log(`Received search query: ${query}`);
    });
}
setInterval(checkForUpdates, 300);

我很抱歉，我不能提供更多的信息，为什么它不工作，因为一切看起来很好，我可以提供更多的信息，如果需要的html和javascript文件。

electron

来源：https://stackoverflow.com/questions/75636910/how-can-i-send-a-variable-from-an-electron-html-file-to-a-javascript-file

1条答案

按热度按时间

qvsjd97n1#

您必须使用旧版本的Electron才能使用remote模块。该模块在一段时间前被撤销。虽然有一个userland remote模块，但最好尽可能通过更好的应用程序设计来避免使用它。
要实现结构良好的Electron应用程序，需要阅读和理解渲染进程与主进程之间通信时Electron的最佳实践。
有关详细信息，请参阅下面列出的链接：

关于你剩下的代码。

在index.js（主进程）文件（下面我将其称为main.js）中，不需要实现setInterval()函数来轮询ipcMain.on('search-query, () => {});，而是将ipcMain.on()函数包含在代码的正常流程中，因为当在该通道上接收到消息时，IPC将触发该函数。

由于其他一切看起来都很正常，让我们创建一个最小化的可重复示例，向您展示如何使用preload.js脚本来完成所有工作。
main.js（主进程）

// Import required electron modules
const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;
const electronIpcMain = require('electron').ipcMain;

// Import required Node modules
const nodePath = require('path');

// Prevent garbage collection
let window;

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

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

    return window;
}

electronApp.on('ready', () => {
    window = createWindow();
});

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

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

// ---

electronIpcMain.on('search', (event, searchValue) => {
    console.log(searchValue);
})

preload.js（主进程）

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

// Exposed protected methods in the render process
contextBridge.exposeInMainWorld(
    // Allowed 'ipcRenderer' methods
    'ipcRenderer', {
        // From render to main
        search: (searchValue) => {
            ipcRenderer.send('search', searchValue);
        }
    }
);

index.html（渲染进程）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Electron Test</title>
        <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
    </head>

    <body>
        <form id="searchForm" class="modrag">
            <label for="search">Search: </label>
            <input type="search" id="search">

            <button type="submit">Submit</button>
        </form>
    </body>

    <script>
        document.getElementById('searchForm').addEventListener('submit', () => {
            window.ipcRenderer.search(document.getElementById('search').value);
        })
    </script>
</html>

赞(0）回复(0）举报 2023-03-06

我来回答

electron 如何将一个变量从电子html文件发送到javascript文件？

1条答案

相关问题

热门标签

最新问答