热门标签 | 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应用程序?.


推荐阅读
  • C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨
    本文探讨了C++异步编程中获取线程执行结果的方法与技巧,并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型,本文详细介绍了如何高效地处理多线程任务,确保程序的稳定性和性能。同时,文章还结合实际案例,展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]
  • Python 伦理黑客技术:深入探讨后门攻击(第三部分)
    在《Python 伦理黑客技术:深入探讨后门攻击(第三部分)》中,作者详细分析了后门攻击中的Socket问题。由于TCP协议基于流,难以确定消息批次的结束点,这给后门攻击的实现带来了挑战。为了解决这一问题,文章提出了一系列有效的技术方案,包括使用特定的分隔符和长度前缀,以确保数据包的准确传输和解析。这些方法不仅提高了攻击的隐蔽性和可靠性,还为安全研究人员提供了宝贵的参考。 ... [详细]
  • 本文介绍了如何利用 Delphi 中的 IdTCPServer 和 IdTCPClient 控件实现高效的文件传输。这些控件在默认情况下采用阻塞模式,并且服务器端已经集成了多线程处理,能够支持任意大小的文件传输,无需担心数据包大小的限制。与传统的 ClientSocket 相比,Indy 控件提供了更为简洁和可靠的解决方案,特别适用于开发高性能的网络文件传输应用程序。 ... [详细]
  • IOS Run loop详解
    为什么80%的码农都做不了架构师?转自http:blog.csdn.netztp800201articledetails9240913感谢作者分享Objecti ... [详细]
  • 解决Only fullscreen opaque activities can request orientation错误的方法
    本文介绍了在使用PictureSelectorLight第三方框架时遇到的Only fullscreen opaque activities can request orientation错误,并提供了一种有效的解决方案。 ... [详细]
  • 深入解析 Lifecycle 的实现原理
    本文将详细介绍 Android Jetpack 中 Lifecycle 组件的实现原理,帮助开发者更好地理解和使用 Lifecycle,避免常见的内存泄漏问题。 ... [详细]
  • 如何在Java中使用DButils类
    这期内容当中小编将会给大家带来有关如何在Java中使用DButils类,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。D ... [详细]
  • 如何在Linux服务器上配置MySQL和Tomcat的开机自动启动
    在Linux服务器上部署Web项目时,通常需要确保MySQL和Tomcat服务能够随系统启动而自动运行。本文将详细介绍如何在Linux环境中配置MySQL和Tomcat的开机自启动,以确保服务的稳定性和可靠性。通过合理的配置,可以有效避免因服务未启动而导致的项目故障。 ... [详细]
  • 为了确保iOS应用能够安全地访问网站数据,本文介绍了如何在Nginx服务器上轻松配置CertBot以实现SSL证书的自动化管理。通过这一过程,可以确保应用始终使用HTTPS协议,从而提升数据传输的安全性和可靠性。文章详细阐述了配置步骤和常见问题的解决方法,帮助读者快速上手并成功部署SSL证书。 ... [详细]
  • 本文将继续探讨 JavaScript 函数式编程的高级技巧及其实际应用。通过一个具体的寻路算法示例,我们将深入分析如何利用函数式编程的思想解决复杂问题。示例中,节点之间的连线代表路径,连线上的数字表示两点间的距离。我们将详细讲解如何通过递归和高阶函数等技术实现高效的寻路算法。 ... [详细]
  • 在处理木偶评估函数时,我发现可以顺利传递本机对象(如字符串、列表和数字),但每当尝试将JSHandle或ElementHandle作为参数传递时,函数会拒绝接受这些对象。这可能是由于这些句柄对象的特殊性质导致的,建议在使用时进行适当的转换或封装,以确保函数能够正确处理。 ... [详细]
  • 思科IOS XE与ISE集成实现TACACS认证配置
    本文详细介绍了如何在思科IOS XE设备上配置TACACS认证,并通过ISE(Identity Services Engine)进行用户管理和授权。配置包括网络拓扑、设备设置和ISE端的具体步骤。 ... [详细]
  • 技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统
    技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ... [详细]
  • 在Linux系统中避免安装MySQL的简易指南
    在Linux系统中避免安装MySQL的简易指南 ... [详细]
  • 在Eclipse中提升开发效率,推荐使用Google V8插件以增强Node.js的调试体验。安装方法有两种:一是通过Eclipse Marketplace搜索并安装;二是通过“Help”菜单中的“Install New Software”,在名称栏输入“googleV8”。此插件能够显著改善调试过程中的性能和响应速度,提高开发者的生产力。 ... [详细]
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社区 版权所有