Fatal编程技术网
  • javascript/
  • 如何在Electron呈现的网页上调用JavaScript函数？

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

javascript node.js electron

如何在Electron呈现的网页上调用JavaScript函数？,javascript,node.js,electron,Javascript,Node.js,Electron,我正在尝试编写一个使用的包装器（以前是AtomShell） 我的main.js文件（它看起来几乎与“”示例相同，我只是在一个地方更改了它）： var-app=require（'app'）；//控制应用程序寿命的模块。 var BrowserWindow=require（'browser-window'）；//模块创建本机浏览器窗口。 //向我们的服务器报告崩溃。 require（'crash-reporter'）。start（）； //保留窗口对象的全局引用，如果不保留，则窗口将 //当java

我正在尝试编写一个使用的包装器（以前是AtomShell）

我的
main.js
文件（它看起来几乎与“”示例相同，我只是在一个地方更改了它）：

var-app=require（'app'）；//控制应用程序寿命的模块。
var BrowserWindow=require（'browser-window'）；//模块创建本机浏览器窗口。
//向我们的服务器报告崩溃。
require（'crash-reporter'）。start（）；
//保留窗口对象的全局引用，如果不保留，则窗口将
//当javascript对象被GCed时，将自动关闭。
var mainfown=null；
//关闭所有窗口后退出。
app.on（'window-all-closed'，function（）{
if（process.platform！=“darwin”）
app.quit（）；
});
//当atom shell完成所有操作时，将调用此方法
//初始化并准备好创建浏览器窗口。
app.on（'ready'，function（）{
//创建浏览器窗口。
mainWindow=新浏览器窗口（{'width'：1000，'height'：600}）；
//并加载应用程序的index.html。
mainWindow.loadUrl（'https://twitter.com');
//当窗口关闭时发出。
mainWindow.on（'closed'，function（）{
//取消对窗口对象的引用，通常会存储窗口
//在阵列中，如果您的应用程序支持多个窗口，则此时
//何时应该删除相应的元素。
主窗口=空；
});
});
我尝试在
mainWindow.loadUrl（）
之后调用
alert（）
函数，但它不执行

我知道
main.js
文件就像我的应用程序的服务器端，但问题是。。。如何调用页面上的JavaScript函数？我应该在哪里写代码

例如，我想执行以下操作：

$（文档）.ready（函数（）{
警惕（“万岁！”）；
});
我已经解决了这个问题。下面是示例代码：

。。。
app.on（'ready'，function（）{
...
main window.webContents.on（'did-finish-load'，function（））{
executeJavaScript（“警报（'Hello There！'）；”；
});
...
});
首先，你应该清楚地看到电子（以前是原子壳）内部过程的区别。Electron将主进程用作后端（您可以像这样称之为“服务器端”）和应用程序的入口点。正如您可能了解的那样，主进程可以生成多个
BrowserWindow
实例，这些实例实际上是独立的操作系统窗口，每个窗口都承载一个铬渲染的网页，并在一个名为渲染器进程的独立进程中运行。您可以将renderer进程视为一个具有潜在扩展功能的简单浏览器窗口，比如访问Node.js模块（我写“潜在”，因为您可以关闭renderer进程的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
您可以使用任何类型的连接到指定的端口并启动调试。这意味着理论上任何Node.js调试器都必须工作。看看或者。StackOverflow上有一个关于调试Node.js应用程序的常见问题：.

正确的方法是使用
contents.send（'some_js_Method'，'parameters'）
从
main.js

// 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>

//在main.js中
const{app，BrowserWindow}=require（'electron'）
设win=null
app.on（'ready'，（）=>{
win=新浏览器窗口（{宽度：800，高度：600}）
loadURL（`file://${\uuu dirname}/index.html`）
win.webContents.send（some_js_Method'，'windowcreated！'//调用js方法（异步调用）
})
//在index.html中
require（'electron'）.ipcRenderer.on（'some_js_Method'，（事件、消息）=>{
console.log（消息）//打印“已创建窗口！”
})
虽然您建议的代码显示了警报，但您应该清楚地了解主进程为什么要要求
mainWindow
（渲染器进程）显示警报。我认为主进程和渲染器之间的关注点分离在这里是一个相当重要的问题。因此，从主进程控制渲染器进程的UI行为很可能是应该避免的事情。如果您使用
alert（）
的主要目标是跟踪
main.js
，您可以阅读我对这个问题的回答。这里还提到了一些其他调试技术。