Electronjs - BrowserWindow 不是渲染器进程中的构造函数错误
Posted
技术标签:
【中文标题】Electronjs - BrowserWindow 不是渲染器进程中的构造函数错误【英文标题】：Electronjs - BrowserWindow is not a constructor error inside renderer process 【发布时间】：2021-11-28 01:45:08 【问题描述】：节点版本：14.18.0
操作系统：Mac
这是我的 package.json 文件
"name": "cryptic-app",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts":
"start": "electron ./main.js"
,
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies":
"electron": "14.1.0"
这是我的 main.js
const electron = require('electron')
const path = require('path')
const shell = require('electron').shell
const app, BrowserWindow, Menu = electron
function createWindow ()
const mainWindow = new BrowserWindow(
width: 800,
height: 600,
webPreferences:
enableRemoteModule: true,
nodeIntegration: true,
contextIsolation: false,
)
// and load the index.html of the app.
const indexFilePath = path.join( __dirname, 'src/index.html')
mainWindow.loadFile(indexFilePath)
mainWindow.webContents.openDevTools()
var menu = Menu.buildFromTemplate([
label: 'Menu',
submenu: [
label: 'Adjust notification value'
,
label: 'CoinMarketCap',
click()
shell.openExternal('http://www.coinmarketcap.com/')
,
type: 'separator'
,
label: 'Exit',
click()
app.quit()
,
]
])
Menu.setApplicationMenu(menu)
app.whenReady().then(() =>
createWindow()
app.on('activate', function ()
if (BrowserWindow.getAllWindows().length === 0) createWindow()
)
)
app.on('window-all-closed', function ()
if (process.platform !== 'darwin') app.quit()
)
这是我的 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<div class="row">
<div id="price-container">
<p class="subtext">Current BTC USD</p>
<h1 id="price">Loading...</h1>
</div>
<div id="goal-container">
<p>
<img src="https://s3.amazonaws.com/coursetro/tutorial_images/up.svg">
<span id="target-price">Choose a target price</span>
</p>
</div>
<div class="right-container">
<button id="notifyBtn">Notify me when...</button>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
这是我的 index.js 文件
const electron = require('electron')
const path = require('path')
const BrowserWindow = electron
console.log(electron)
const notifyBtn = document.getElementById('notifyBtn')
notifyBtn.addEventListener('click', function(e)
const modalPath = path.join('file://', __dirname, 'add.html')
console.log("modalPath", modalPath)
let win = new BrowserWindow( width: 400, height: 200, parent: top )
win.on('close', function()
win = null
)
win.loadFile(modalPath)
win.show()
)
这是 index.js 中的电子对象
我在渲染过程中得到 BrowserWindow is not a constructor 错误，我不确定是什么导致了这个问题。有人可以帮忙吗？
【问题讨论】：
您不能在渲染器进程中创建 BrowserWindow。只需要在主进程中使用 这能回答你的问题吗？ Electron.js 11.0.4 - BrowserWindow is not a contructor 感谢@pushkin，我正在使用电子 14，其中远程已弃用，如上述链接中所建议的那样。 【参考方案1】：这就是我解决这个问题的方法：- 由于我使用的是 electron > 14，因此远程资源在渲染器进程中不可用，并且不能由 lectron 模块提供。
为了让渲染器进程可以使用远程资源，我添加了这个模块。 @electron/remote
这就是我的 main.js 现在的样子
const remote = require('@electron/remote/main')
const electron = require('electron')
remote.initialize() // Intitialize
const path = require('path')
const shell = require('electron').shell
const app, BrowserWindow, Menu = electron
function createWindow ()
// Create the browser window.
const mainWindow = new BrowserWindow(
width: 800,
height: 600,
webPreferences:
nodeIntegration: true,
contextIsolation: false,
show: false,
)
remote.enable(mainWindow.webContents) // Loads webcontents
const indexFilePath = path.join( __dirname, 'src/index.html')
mainWindow.loadFile(indexFilePath)
mainWindow.webContents.openDevTools()
var menu = Menu.buildFromTemplate([
label: 'Menu',
submenu: [
label: 'Adjust notification value'
,
label: 'CoinMarketCap',
click()
shell.openExternal('http://www.coinmarketcap.com/')
,
type: 'separator'
,
label: 'Exit',
click()
app.quit()
,
]
])
Menu.setApplicationMenu(menu)
app.whenReady().then(() =>
createWindow()
app.on('activate', function ()
if (BrowserWindow.getAllWindows().length === 0) createWindow()
)
)
app.on('window-all-closed', function ()
if (process.platform !== 'darwin') app.quit()
)
现在我可以像这样访问我的 index.js 文件中的浏览器窗口
const BrowserWindow = require('@electron/remote')
参考链接：- 关于网页内容，read here
【讨论】：
以上是关于Electronjs - BrowserWindow 不是渲染器进程中的构造函数错误的主要内容，如果未能解决你的问题，请参考以下文章
自建exe使用Electronjs为自己写windows软件
electronJS / 检测外部应用程序是不是正在运行 (MacOS) (沙盒) (MAS)
ElectronJS - 无法读取未定义的属性（读取“whenReady”）