Question

当我使用npm start运行代码时，需要花费一些时间才能完全加载main_window的标题。这是展示它的GIF：

这是我的代码：

const electron = require('electron')
const url = require('url')
const path = require('path')

const {app, BrowserWindow, Menu} = electron

let main_window

app.on('ready', function() {
    main_window = new BrowserWindow({})
    main_window.loadURL(url.format({
        pathname: path.join(__dirname, 'main_window.html'),
        protocol: 'file:',
        slashes: true
    }))

    Menu.setApplicationMenu(null)
})

在加载我在main_window.html中指定的标题之前，它显示了我在package.json中指定的项目的名称。我认为这两个文件的内容无关紧要，但是无论如何，它们在这里：

main_window.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>7Watchlist Data Grabber</title>
    </head>
    <body>
        <h1>Another Collection of Web Crawlers</h1>
    </body>
</html>

package.json：

{
  "name": "datagrabber",
  "version": "1.0.0",
  "description": "Another Collection of Web Crawlers",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/amirashabani/DataGrabber.git"
  },
  "author": "Amir A. Shabani",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/amirashabani/DataGrabber/issues"
  },
  "homepage": "https://github.com/amirashabani/DataGrabber#readme",
  "dependencies": {
    "electron": "^5.0.0"
  }
}

我必须接受吗？我认为这不是正常现象。

Edit1：将sandbox设置为true或使用npm start --no-proxy-resolver运行应用程序（由@Mr. Polywhirl建议）似乎没有什么不同：

Answer 1

Polywhirl先生提到，sandbox = true和--no-proxy-resolver之外的另一个选择是directly set the title。然后将使用给定的标题，直到呈现页面为止，Chromium能够显示HTML的<title>内容。

main_window = new BrowserWindow ({
    title: "7Watchlist Data Grabber"
});

此解决方案不会阻止您的代码访问NodeJS API，因为它不会创建沙箱。但是，沙盒方法相当安全，因此也很安全。

Answer 2

我必须接受吗？我认为这不是正常现象。

这是正常现象，因为BrowserWindow的生存期与HTML（DOM）的生存期不同。您可以多次将URL加载到BrowserWindow中，并执行许多与HTML不相关的其他任务。

因此，我认为期望BrowserWindow遵循HTML的DOM状态并不合理。但是，您可以那样做

使用'dom-ready'或'ready-to-show'事件来避免在HTML完全加载之前显示任何内容（包括原始窗口标题）

From docs

const { BrowserWindow } = require('electron')
let win = new BrowserWindow({ show: false })
win.once('ready-to-show', () => {
  win.show()
})

Answer 3

将true的{{3}}设置为BrowserWindow。

参考： webPreferences.sandbox

main_window = new BrowserWindow({
  webPreferences: {
    sandbox: true
  }
})

编辑

另一个建议是使用--no-proxy-resolver标志运行该应用程序。

请参阅：nodeJS / Electron renders pages slower than Chrome

电子窗口标题需要花费一些时间来加载（在加载之前显示项目的名称）

3 个答案:

编辑