如何在Electron呈现的网页上调用JavaScript函数？
我正在尝试使用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!");
});
我已经解决了这个问题。 以下是示例代码：
...
app.on('ready', function() {
...
mainWindow.webContents.on('did-finish-load', function() {
mainWindow.webContents.executeJavaScript("alert('Hello There!');");
});
...
});
首先，您应该清楚地看到Electron（以前称为Atom Shell）内部流程的差异。 Electron利用主流程作为后端（您可以称之为“服务器端”）和应用程序的入口点。 正如你可能理解的那样，主进程可以产生多个BrowserWindow实例，它们实际上是独立的操作系统窗口，每个操作系统窗口托管一个Chromium呈现的网页，并在称为渲染器进程的单独进程中运行。 您可以将渲染器进程视为具有潜在扩展功能的简单浏览器窗口，例如访问Node.js模块（由于您可以关闭渲染器进程的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调试器连接到分配的端口并开始调试。 这意味着理论上任何Node.js调试器都必须工作。 看看node-inspector或WebStorm调试器。 StackOverflow中有一个关于调试Node.js应用程序的流行问题：如何调试Node.js应用程序？
正确的方法是使用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>
上一篇: How to call a JavaScript function on a web page rendered by Electron?
下一篇: How to debug node js app with breakpoints and everything?