如何在 Electron 渲染的网页上调用 JavaScript 函数？答案

【问题标题】：How to call a JavaScript function on a web page rendered by Electron?如何在 Electron 渲染的网页上调用 JavaScript 函数？
【发布时间】：2015-05-09 08:19:35
【问题描述】：

我正在尝试使用 Electron（以前的 Atom Shell）为 Twitter 编写一个包装器。

我的main.js 文件（它看起来几乎与“Hello World”示例相同，我只是在一处更改了它）：

var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Report crashes to our server.
require('crash-reporter').start();

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the javascript object is GCed.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  if (process.platform != 'darwin')
    app.quit();
});

// This method will be called when atom-shell has done everything
// initialization and ready for creating browser windows.
app.on('ready', function() {

  // Create the browser window.
  mainWindow = new BrowserWindow ({'width':1000,'height':600});
  // and load the index.html of the app.
  mainWindow.loadUrl('https://twitter.com');

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
});

我尝试在mainWindow.loadUrl() 之后立即调用alert() 函数，但它没有执行。

我知道main.js 文件就像我的应用程序的服务器端，但问题是...如何在页面上调用 JavaScript 函数？我应该在哪里写代码？

例如，我想执行此操作：

$(document).ready(function() {
    alert("Hurray!");
});

【问题讨论】：

标签： javascript node.js electron

【解决方案1】：

我已经解决了这个问题。下面是示例代码：

...

app.on('ready', function() {

  ...

  mainWindow.webContents.on('did-finish-load', function() {
    mainWindow.webContents.executeJavaScript("alert('Hello There!');");
  });

  ...

});

【讨论】：

虽然您提出的代码显示了警报，但您应该清楚地理解为什么主进程要要求mainWindow（渲染器进程）显示警报。我认为主进程和渲染器之间的关注点分离是一个非常重要的问题。出于这个原因，从主进程控制渲染器进程的 UI 行为很可能是人们应该避免的事情。如果您使用alert() 的主要目标是追踪main.js，您可以阅读我对这个问题的回答。那里还提到了其他一些调试技术。

【解决方案2】：

首先，您应该清楚地看到 Electron（以前的 Atom Shell）中的进程差异。 Electron 将 主进程 用作一种后端（您可以将其称为“服务器端”）和应用程序的入口点。正如您可能理解的那样，主进程可以生成多个BrowserWindow 实例，它们实际上是独立的操作系统窗口，每个窗口都托管一个 Chromium 渲染的网页，运行在一个名为 renderer process 的单独进程中。您可以将渲染器进程视为具有潜在扩展功能的简单浏览器窗口，例如访问 Node.js 模块（我写“potentially”，因为您可以关闭渲染器进程的 Node.js 集成）。

应该提到的是，虽然您有一个用于渲染器进程的带有 GUI 的窗口，但您没有用于主进程的窗口。事实上，为你的应用程序的后端逻辑设置一个并没有多大意义。所以，不能在主进程中直接调用alert()，看到告警窗口。您提出的解决方案确实显示了警报。但重要的是要了解弹出窗口是由渲染器进程而不是主进程本身创建的！主进程只是要求渲染器显示警报（webContents.executeJavaScript 函数实际上就是这样做的）。

其次，据我了解，您在这里通过在主进程中调用 alert() 函数真正想要实现的是程序执行的跟踪。您可以调用console.log() 将所需的消息输出到控制台。在这种情况下，应用程序本身必须从控制台启动：

/path/to/electron-framework/electron /your/app/folder

现在，更好的是可以调试主进程。为此，必须使用--debug（或--debug-brk）键和分配给它的侦听端口的值来启动应用程序。就这样：

/path/to/electron-framework/electron --debug=1234 /your/app/folder

您可以使用任何类型的V8 debugger 附加到分配的端口并开始调试。这意味着理论上任何 Node.js 调试器都必须工作。看看node-inspector 或WebStorm debugger。 StackOverflow 上有一个关于调试 Node.js 应用程序的热门问题：How do I debug Node.js applications?。

【讨论】：

【解决方案3】：

正确的方式是使用contents.send('some_js_Method','parameters')从main.js调用网页中的javascript方法

// In the main.js
const {app, BrowserWindow} = require('electron')
let win = null

app.on('ready', () => {
  win = new BrowserWindow({width: 800, height: 600})
  win.loadURL(`file://${__dirname}/index.html`)
  win.webContents.send(some_js_Method', 'window created!') //calling js method (async call)
})


//in index.html
<html>
<body>
  <script>
    require('electron').ipcRenderer.on('some_js_Method', (event, message) => {
      console.log(message)  // Prints 'window created!'
    })
  </script>
</body>
</html>

【讨论】：