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

时间:2018-05-27 05:38:26

标签: electron

我是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无效......任何帮助都将不胜感激。提前谢谢。

1 个答案:

答案 0 :(得分: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

相关问题