Electron - 如何知道渲染器窗口何时准备好答案

【问题标题】：Electron - How to know when renderer window is readyElectron - 如何知道渲染器窗口何时准备好
【发布时间】：2017-07-06 04:40:06
【问题描述】：

在我的主进程中，我创建了一个渲染器窗口：

var mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    x: 0,
    y: 0,
    frame: false,
    resizable: true
});
mainWindow.openDevTools();
mainWindow.loadURL('file://' + __dirname + '/renderer/index.html');

那我想通过某种方式与它交流：

mainWindow.webContents.send('message', 'hello world');

但是主窗口没有收到此消息，因为在我尝试发送它时它还没有完全创建。

我通过将后面的代码包装在 setTimeout() 中暂时解决了这个问题，但这绝对不是解决竞争条件的正确方法。

主窗口准备就绪时是否有回调？我尝试了文档中提到的“ready-to-show”事件，但没有成功。

【问题讨论】：

标签： electron

【解决方案1】：

“mainWindow”上的侦听器对我不起作用。我改用“mainWindow.webContents”。

mainWindow.webContents.once('dom-ready', () => {});

【讨论】：

【解决方案2】：

在前面的答案中没有提到，loadURL 返回一个在触发 'did-finish-load' 事件的同时解决的承诺；也就是说，它们本质上是等价的，除了一个是承诺，另一个是回调。

【讨论】：

这是 Electron 5 的一个特性，这就是为什么之前没有提到它
在 Electron 6 中完美运行，我摆脱了加载事件并改用它。

【解决方案3】：

看看Electron browser-window documentation中提到的did-finish-load事件。

mainWindow.once('did-finish-load', () => {
   // Send Message
})

好像也有dom-readyevent。

【讨论】：

渲染器窗口此时尚未准备好。它甚至无法接收消息。
@Steffan 你能否详细说明一下，为什么did-finish-load 中的窗口没有准备好？ Electron Docs 说，当onload 事件被调度时，该事件被发出。所以我会假设，页面已完全加载。 PS我需要知道，什么时候在浏览器window中添加事件监听器是安全的（比如postMessage）
@ford04 实际上我不是 100% 确定原因，但我无法使用它获取 DOM 元素。但是使用 mainWindow.webContents.once('dom-ready', () => {}) 也确实适用于 DOM 元素。我猜这是因为窗口实际上已经准备好了，但它还没有呈现内容。
谨防跟踪失败以及“did-fail-load”

【解决方案4】：

检查这个：https://github.com/electron/electron/blob/master/docs/api/web-contents.md

您可以使用此事件来了解您的窗口是否在 main.js [CASE 1] 中准备就绪，但如果想知道您的页面何时已满载，您应该在 index.html [CASE 2] 中添加一个事件然后你可以附加一个函数，向他的父 Main.js 发送一条消息，告诉他，他准备好了，使用 IPCrenderer 和 IPCmain

案例 1

main.js：

mainWindows.webContents.on('did-finish-load',WindowsReady);

function WindowsReady() {
    console.log('Ready');
}

案例 2

html:

<script>
const {ipcRenderer} = require('electron');
document.addEventListener('DOMContentLoaded',pageLoaded);

 function pageLoaded(){
     alert('The page is loade');
     ipcRenderer.send('Am_I_Ready',"Im ready");
 }
</script>

Main.js：

const {ipcMain} = electron;

ipcMain.on('Am_I_Ready', doSomething)

function doSomething(){
  console.log('Everything is ready.');
}

【讨论】：

【解决方案5】：

像这样使用 mainWindow.webContents：

mainWindow.webContents.on('did-finish-load', () => {
  mainWindow.webContents.send('message', 'hello world');
}

【讨论】：

这应该被标记为答案。刚刚在我的代码中使用它，它工作得很好。这将允许我删除 jQuery onload。

【解决方案6】：

这些天，您使用“ready-to-show”事件。

https://electronjs.org/docs/api/browser-window#using-ready-to-show-event

【讨论】：