electron 如何知道渲染器窗口何时准备就绪

6bc51xsx 于 2022-12-08 发布在 Electron

关注(0)|答案(7)|浏览(299)

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

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');

但是，主窗口没有收到此消息，因为在我尝试发送它时，它尚未完全创建完毕。
我已经通过将后面的代码 Package 在setTimeout（）中暂时解决了这个问题，但这绝对不是解决争用条件的正确方法。
当主窗口准备就绪时是否有回调？我尝试了文档中提到的“准备显示”事件，但它不起作用。

electron

来源：https://stackoverflow.com/questions/42284627/electron-how-to-know-when-renderer-window-is-ready

7条答案

按热度按时间

kninwzqo1#

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

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

赞(0）回复(0）举报 2022-12-08

44u64gxh2#

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

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

似乎也有一个dom-readyevent。

赞(0）回复(0）举报 2022-12-08

vwhgwdsa3#

在前面的回答中没有提到，loadURL返回一个承诺，该承诺在激发“did-finish-load”事件的同时进行解析;也就是说，它们本质上是等价的，只是一个是promise，另一个是callback。

赞(0）回复(0）举报 2022-12-08

qlvxas9a4#

请检查：https://github.com/electron/electron/blob/master/docs/api/web-contents.md
您可以使用此事件来了解您的窗口在main.js中是否准备就绪[案例1]，但如果要了解您的页面何时完全加载，则应在index.html中添加一个事件[案例2]，然后您可以附加一个函数，该函数使用IPCrenderer和IPCmain向其父Main.js发送消息，告诉他已准备就绪

案例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.');
}

赞(0）回复(0）举报 2022-12-08

u3r8eeie5#

使用mainWindow.webContents，如下所示：

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

赞(0）回复(0）举报 2022-12-08

xa9qqrwz6#

我在我的应用程序中尝试了以下代码

window.webContents.once("did-finish-load", () => {
      console.log("did-finish-load");
    });

    window.webContents.once("dom-ready", () => {
      console.log("dom-ready");
    });

    window.once("ready-to-show", () => {
      console.log("ready-to-show");
    });

这是从本地文件系统加载index.html之后的情况：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hi mom</title>
  <script defer src="renderer.js"></script></head>
  <body>
    <div id="renderer"></div>
  </body>
</html>

根据console.log输出，他们按以下顺序击发：

dom-ready
ready-to-show
did-finish-load

因此，did-finish-load可能是要等待的一个--因为它是最新的，因此可能是最完全加载的。
webContents.send的API文档也包括此示例：

// In the main process.
const { app, BrowserWindow } = require('electron')
let win = null

app.whenReady().then(() => {
  win = new BrowserWindow({ width: 800, height: 600 })
  win.loadURL(`file://${__dirname}/index.html`)
  win.webContents.on('did-finish-load', () => {
    win.webContents.send('ping', 'whoooooooh!')
  })
})

如果我删除外部脚本文件的加载...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Hi mom</title>
  <!-- <script defer src="renderer.js"></script> -->
</head>
<body>
  <div id="renderer"></div>
</body>
</html>

......然后事件的顺序会稍微改变......

dom-ready
did-finish-load
ready-to-show

......这也许可以解释为什么这个问题的其他一些答案会相互矛盾。

赞(0）回复(0）举报 2022-12-08

smdnsysy7#

现在，您使用“准备显示”事件。
https://electronjs.org/docs/api/browser-window#using-ready-to-show-event

赞(0）回复(0）举报 2022-12-08

我来回答

electron 如何知道渲染器窗口何时准备就绪

7条答案

相关问题

热门标签

最新问答