如何在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!"); }); 

       

网上收集的解决方案 "如何在Electron呈现的网页上调用JavaScript函数?"

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

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

首先,你应该清楚地看到Electron(以前的Atom Shell)中的进程的区别。 Electron利用主stream程作为后端(您可以称之为“ 服务器端 ”)和应用程序的入口点。 正如你可能理解的那样,主进程可以产生BrowserWindow多个实例,这些实例实际上是独立的操作系统窗口,每个托pipe一个Chromium渲染的网页在一个单独的进程中运行,这个进程叫做渲染器进程 。 您可以将渲染器进程视为具有潜在扩展function的简单浏览器窗口,例如访问Node.js模块(由于您可以closures渲染器进程的Node.js集成,因此可能会写入)。

应该提到的是,虽然你有一个渲染器进程GUI的窗口,但你没有主进程。 事实上,为您的应用程序的后端逻辑做一个没有太大的意义。 因此,不能直接在主进程中调用alert()并看到警报窗口。 您提出的解决scheme确实显示了警报。 但是重要的是要明白,popup窗口是由渲染器进程创build的,而不是主进程本身! 主要过程只是要求渲染器显示警报(这是webContents.executeJavaScript函数实际执行的操作)。

其次,正如我所了解的那样,在主stream程中调用alert()函数是实现程序执行的追踪。 您可以调用console.log()将所需的消息输出到控制台。 在这种情况下,应用程序本身必须从控制台启动:

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

现在,更好的是你可以debugging主stream程。 为了做到这一点,应用程序必须以--debug (或--debug-brk )键和分配给它的监听端口的值来启动。 就像那样:

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

您可以使用任何types的V8debugging器来连接到指定的端口并启动debugging。 这意味着理论上任何Node.jsdebugging器都必须工作。 看看node-inspector或WebStormdebugging器 。 StackOverflow中有一个关于debuggingNode.js应用程序的stream行问题: 如何debuggingNode.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>