电子浏览器窗口 [英] Electron browser window
问题描述
我的电子应用程序中有2个 BrowserWindow 实例， mainWindow 和 secondaryWindow 。 mainWindow 中有一个按钮，单击该按钮应打开 secondaryWindow 。
I have 2 BrowserWindow instances in my electron application, mainWindow and secondaryWindow. There is a button in mainWindow which when clicked should open secondaryWindow.
现在我的问题是我不希望在 secondaryWindow mainWindow 中的任何内容$ c>已关闭。
Now my issue is that I don't want to be able to click on anything in the mainWindow until the secondaryWindow is closed.
我能得到的最接近的方法是使用 mainWindow.hide（），但这仅仅是完全隐藏了窗口，我想在 mainWindow ，但应将其禁用/禁用。
The closest I could get was to use mainWindow.hide() but this just completely hides the window, I want to still see the mainWindow while the secondaryWindow is active but it should be disabled / inactive.
有什么建议吗？
推荐答案
有2种打开方法子窗口：
There are 2 ways to open a child window:
1。在主流程中：
您可以从主流程中打开一个子窗口。例如，这对于菜单中的自定义窗口很有用。
You can open a child window from the main process. This is for example useful for a custom window in the menu.
在这里，您可以使用构造函数使其成为 parent 的子级。 。如果 modal 属性为true，则在关闭子窗口之前将无法访问父窗口。
Here you can use the constructor to make it a child of parent. If the attribute modal is true, the parent window will not be accessible until the child window is closed.
function createChild(parent, html) {
//creates modal window
child = new BrowserWindow({
width: 786,
height: 847,
parent: parent,
modal: true,
show: false
});
child.loadURL(html);
child.webContents.openDevTools();
child.once("ready-to-show", () => {
child.show();
});
}
2。从渲染器进程
现在，我们并不总是希望通过IPC向主进程发送事件只是打开一个子窗口，对吧？
Now, we don't always want to send an event over the IPC to the main process just to open a child window, right?
我们不需要。为此，我们可以在窗口中使用 open 函数。
We don't need to. We can use the open function on our window for that.
例如：
const button = document.querySelector('button')
button.addEventListener('click', e => {
self.open(`file://${__dirname}/child.html`)
})
使此窗口成为您父母的孩子在模式和模式上，您可以在父窗口上注册事件监听器：
To make this window a child of your parent and modal, you can register an eventlistener on the parent window:
parent.webContents.on(
"new-window",
(event, url, frameName, disposition, options, additionalFeatures) => {
Object.assign(options, {
parent: parent,
modal: true
});
}
);
使用此功能时，调用 window.open（）时父窗口，它将打开一个模态子窗口。
With this, when window.open() is called on the parent window, it will open a modal child window.
示例
main.js
const { app, BrowserWindow } = require("electron");
let win;
function createWindow() {
win = new BrowserWindow({ width: 1000, height: 800 });
win.loadURL(`file://${__dirname}/index.html`);
win.webContents.openDevTools();
win.on("closed", () => {
win = null;
});
win.webContents.on(
"new-window",
(event, url, frameName, disposition, options, additionalFeatures) => {
Object.assign(options, {
parent: win,
modal: true
});
}
);
}
app.on("ready", createWindow);
index.html
index.html
<!DOCTYPE html>
<html>
<body>
<p>I am the parent, you can't touch me until you closed my child!</p>
<button>Open child!</button>
<script>
const button = document.querySelector('button')
button.addEventListener('click', e => {
self.open(`file://${__dirname}/child.html`)
})
</script>
</body>
</html>
child.html
child.html
<!DOCTYPE html>
<html>
<body>
I'm the child!
</body>
</html>
更新电子5或更高
使用电子5时，节点集成被禁用出于安全原因，默认情况下渲染器进程。由于此示例在渲染器过程中使用 __ dirname （这是节点API的一部分），因此我们需要重新引入它，因为它不再可用。在此示例中，我为此目的使用了预加载脚本：
Update Electron 5 or higher
With electron 5 node integration was disabled in the renderer process by default for security reasons. Since this example uses __dirname (which is part of the node API) in the renderer process, we need to reintroduce it, because it is not available anymore. In this example I use a preload script for this purpose:
main.js
const { app, BrowserWindow } = require("electron");
let win;
function createWindow() {
win = new BrowserWindow({
width: 1000,
height: 800,
webPreferences: {
preload: `${__dirname}/preload.js`,
},
});
win.loadURL(`file://${__dirname}/index.html`);
win.webContents.openDevTools();
win.on("closed", () => {
win = null;
});
win.webContents.on(
"new-window",
(_event, _url, _frameName, _disposition, options, _additionalFeatures) => {
Object.assign(options, {
parent: win,
modal: true,
});
}
);
}
app.whenReady().then(createWindow).catch(console.error);
preload.js
preload.js
window.__dirname = __dirname;
index.html
index.html
<!DOCTYPE html>
<html>
<body>
<p>I am the parent, you can't touch me until you closed my child!</p>
<button>Open child!</button>
<script>
const button = document.querySelector("button");
button.addEventListener("click", (e) => {
self.open(`file://${__dirname}/child.html`);
});
</script>
</body>
</html>
child.html
child.html
<!DOCTYPE html>
<html>
<body>
I'm the child!
</body>
</html>
这篇关于电子浏览器窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
