作者：黑马理财投资 | 来源：互联网 | 2023-05-18 23:36
我正在尝试使用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;
});
});
我尝试在之后调用alert()函数mainWindow.loadUrl()但它没有执行.
我知道该main.js文件就像我的应用程序的服务器端,但问题是......如何在页面上调用Javascript函数？我应该在哪里写代码？
例如,我想执行此操作:
$(document).ready(function() {
alert("Hurray!");
});
evlogii..
22
我已经解决了这个问题.这是示例代码:
...
app.on('ready', function() {
...
mainWindow.webContents.on('did-finish-load', function() {
mainWindow.webContents.executeJavascript("alert('Hello There!');");
});
...
});
Konstantin G..
13
首先,您应该清楚地看到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应用程序？.
1> evlogii..：
我已经解决了这个问题.这是示例代码:
...
app.on('ready', function() {
...
mainWindow.webContents.on('did-finish-load', function() {
mainWindow.webContents.executeJavascript("alert('Hello There!');");
});
...
});
虽然您建议的代码显示警报,但您应该清楚地理解为什么主进程要求`mainWindow`(渲染器进程)显示警报.我认为主流程和渲染器之间的关注点分离是一个非常重要的问题.因此,从主进程控制渲染器进程的UI行为很可能是应该避免的.如果你的主要目标是`alert()`是&＃39;main.js`的跟踪,你可以阅读我对这个问题的答案.那里注意到一些其他调试技术.
2> Konstantin G..：
首先,您应该清楚地看到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应用程序？.
京公网安备 11010802041100号