热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何在Electron呈现的网页上调用JavaScript函数?

如何解决《如何在Electron呈现的网页上调用JavaScript函数?》经验,为你挑选了2个好方法。

我正在尝试使用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!');");
  });

  ...

});

虽然您建议的代码显示警报,但您应该清楚地理解为什么主进程要求`mainWindow`(渲染器进程)显示警报.我认为主流程和渲染器之间的关注点分离是一个非常重要的问题.因此,从主进程控制渲染器进程的UI行为很可能是应该避免的.如果你的主要目标是`alert()`是'main.js`的跟踪,你可以阅读我对这个问题的答案.那里注意到一些其他调试技术. (4认同)


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()`是'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应用程序?.


推荐阅读
  • 本文详细介绍了如何准备和安装 Eclipse 开发环境及其相关插件,包括 JDK、Tomcat、Struts 等组件的安装步骤及配置方法。 ... [详细]
  • DNN Community 和 Professional 版本的主要差异
    本文详细解析了 DotNetNuke (DNN) 的两种主要版本:Community 和 Professional。通过对比两者的功能和附加组件,帮助用户选择最适合其需求的版本。 ... [详细]
  • 本文介绍如何通过Windows批处理脚本定期检查并重启Java应用程序,确保其持续稳定运行。脚本每30分钟检查一次,并在需要时重启Java程序。同时,它会将任务结果发送到Redis。 ... [详细]
  • 作为一名新手,您可能会在初次尝试使用Eclipse进行Struts开发时遇到一些挑战。本文将为您提供详细的指导和解决方案,帮助您克服常见的配置和操作难题。 ... [详细]
  • 本文介绍如何解决在 IIS 环境下 PHP 页面无法找到的问题。主要步骤包括配置 Internet 信息服务管理器中的 ISAPI 扩展和 Active Server Pages 设置,确保 PHP 脚本能够正常运行。 ... [详细]
  • 本文详细分析了JSP(JavaServer Pages)技术的主要优点和缺点,帮助开发者更好地理解其适用场景及潜在挑战。JSP作为一种服务器端技术,广泛应用于Web开发中。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍了如何在C#中启动一个应用程序,并通过枚举窗口来获取其主窗口句柄。当使用Process类启动程序时,我们通常只能获得进程的句柄,而主窗口句柄可能为0。因此,我们需要使用API函数和回调机制来准确获取主窗口句柄。 ... [详细]
  • 本文探讨了如何优化和正确配置Kafka Streams应用程序以确保准确的状态存储查询。通过调整配置参数和代码逻辑,可以有效解决数据不一致的问题。 ... [详细]
  • 在使用 MUI 框架进行应用开发时,开发者常常会遇到 mui.init() 和 mui.plusReady() 这两个方法。本文将详细解释它们的区别及其在不同开发环境下的应用。 ... [详细]
  • 本教程涵盖OpenGL基础操作及直线光栅化技术,包括点的绘制、简单图形绘制、直线绘制以及DDA和中点画线算法。通过逐步实践,帮助读者掌握OpenGL的基本使用方法。 ... [详细]
  • 使用GDI的一些AIP函数我们可以轻易的绘制出简 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 在进行Revit插件开发时,经常会遇到窗口被其他应用程序遮挡的问题。本文将介绍如何通过简单的代码调整,确保插件窗口始终保持在Revit主界面的最前端,提升用户体验。 ... [详细]
author-avatar
黑马理财投资
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有