js关闭浏览器窗口_电子JS | 浏览器窗口

骑猪看日落 2023-03-05 09:48 58阅读 0赞

js关闭浏览器窗口

Just like any other desktop software application, **Electron JS** also makes use of "Desktop Windows" as its user interface.

与其他桌面软件应用程序一样， **Electron JS**也使用“桌面Windows”作为其用户界面。

We must understand that **Electron JS** uses web pages as its graphical user interface. **BrowserWindow** enables us to see the user interface.

我们必须了解， **Electron JS**使用网页作为其图形用户界面。 **BrowserWindow**使我们能够查看用户界面。

Let us ride on to our first code and **build a browser window**.

让我们继续学习第一个代码并**构建一个浏览器窗口** 。

**Note:** Ensure you have Node.Js and Electron JS installed.

**注意：**确保已安装Node.Js和Electron JS。

**Create a new JavaScript file App.js**

**创建一个新JavaScript文件App.js**

const electron = require ('electron')
    
    const app = electron.app // import electron module
    const BrowserWindow = electron.BrowserWindow //enables UI
    let mainWindow
    app.on ('ready', _ => {
        
        mainWindow = new BrowserWindow({
        
            height : 400,
            width : 400
        })
    
        mainWindow.loadFile('src/index.html')
    
        mainWindow.on ('closed', _ => {
         //detect if window is closed.
            console.log ('closed!')
            mainWindow = null
        })
    })

*  Firstly, we import electron whenever we are starting an electron application.
    
    首先，无论何时开始应用电子，我们都要导入电子 。
 *  We equally import all necessary modules or APIs needed it our application.
    
    我们同样导入应用程序需要的所有必要模块或API。
 *  We also notice that it's imported using the Common JS format or syntax.
    
    我们还注意到，它是使用Common JS格式或语法导入的。
 *  let mainWindow keeps a global reference of the window object where windows may automatically close when the JavaScript object is garbage collected.
    
    let mainWindow保留窗口对象的全局引用，当垃圾对象被垃圾回收时，窗口可能会自动关闭。
 *  app.on creates a new window when the app is initialized and is ready to create a browser window. The width and height values determine the size of the window.
    
    当应用初始化后， app.on会创建一个新窗口，并准备创建浏览器窗口。 宽度和高度值确定窗口的大小。
 *  loadFile method reads and displays the HTML / CSS / JavaScript file to be used as a user interface.
    
    loadFile方法读取并显示要用作用户界面HTML / CSS / JavaScript文件。
 *  LoadURL method can also be used as an alternative to loadFile.
    
    LoadURL方法也可以用作loadFile的替代方法。
 *  Notice that ready and closed options are used to detect if the app is ready or closed.
    
    请注意， 就绪和关闭选项用于检测应用程序是就绪还是关闭。

**Place your HTML, CSS, and JavaScript files in the *src* folder**.

**将您HTML，CSS和JavaScript文件放在*src*文件夹中** 。

Finally, start your app and see the output.

最后，启动您的应用程序并查看输出。

![Electron JS | BrowserWindow (1)][Electron JS _ BrowserWindow _1]

![Electron JS | BrowserWindow (2)][Electron JS _ BrowserWindow _2]

You can always check out the Electron JS official documentation on their website.

您可以随时在其网站上查看Electron JS的官方文档。

Drop your comments if in need of help.

如果需要帮助，请删除您的评论。

> 翻译自: [https://www.includehelp.com/electron-js/browserwindow.aspx][https_www.includehelp.com_electron-js_browserwindow.aspx]

js关闭浏览器窗口

[Electron JS _ BrowserWindow _1]: /images/20230208/b0aee3633cc141cbb4b7ba1c5672a37c.png
[Electron JS _ BrowserWindow _2]: https://www.includehelp.com/electron-js/Images/browserwindow-2.jpg
[https_www.includehelp.com_electron-js_browserwindow.aspx]: https://www.includehelp.com/electron-js/browserwindow.aspx