IpcMain 和 IpcRenderer 从 index.html 调用 main.js 函数答案

【问题标题】：IpcMain and IpcRenderer call main.js function from index.htmlIpcMain 和 IpcRenderer 从 index.html 调用 main.js 函数
【发布时间】：2018-05-27 14:46:21
【问题描述】：

我是electron的新手

这是我的package.json：

{
   "name": "hello",
   "version": "1.0.0",
   "description": "hello app",
   "main": "main.js",
   "scripts": 
   {
       "start": "electron ."
   },
   "keywords": [],
   "author": "Rushikant Pawar",
   "license": "ISC",
   "devDependencies": 
   {
      "electron": "2.0.2"
   },
   "build": 
   {
      "asar": true
   }
}

这是我的index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
  <!-- Insert this line above script imports  -->

  <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

  <!-- Insert this line after script imports -->

  <script>if (window.module) module = window.module;</script>

<script type="text/javascript">
$(document).ready(function () 
{
    window.alert('messageText');
    $("#InputData").on("click", function () 
    {
        var value = $("#searchtext").val();
        mainjsfunction(value);
    });
});
</script>
</head>
<body>
  <h1>Hello World!</h1>

  <form>
    <div class="form-group">
      <label for="exampleFormControlInput1">Input Text</label>
      <input type="text" class="form-control" id="searchtext" placeholder="rushikant pawar">
    </div>

    <button type="button" id="InputData" class="btn btn-primary mb-2">Confirm identity</button>
  </form>

</body>
</html>

我的window.alert 正在工作...但我的click 功能和mainjsfunction 不工作...任何帮助将不胜感激。提前谢谢你。

【问题讨论】：

标签： electron

【解决方案1】：

如果您的“mainjsfunction”位于您的主进程（例如 main.js）中，您可以/应该使用 ipc 来触发您的函数。

例如，在您的 main.js 文件中，您可以这样做：

const {ipcMain} = require('electron')
ipcMain.on('call-mainjsfunction', (event, arg) => {
  console.log(arg) // prints "ping"
  var res = mainjsfunction(arg);
  event.sender.send('reply-mainjsfunction', res)
})

在你的 index.html 或客户端 js 代码中你会这样做：

const {ipcRenderer} = require('electron')
ipcRenderer.send('call-mainjsfunction', 'ping') //eg placed in your onclick

ipcRenderer.on('reply-mainjsfunction', (event, res) => {
 console.log(res) // result back in client/renderer
})

参考：https://github.com/electron/electron/blob/master/docs/api/ipc-main.md

【讨论】：