• 5、Electron 窗口的尺寸和位置以及全屏


    index.js

    /**
     * 单位:像素
     * width:窗口宽度  height:窗口高度
     * minWidth:窗口最小宽度 minHeight:窗口最小高度
     * maxWidth:窗口最大宽度 maxHeight:窗口最大高度
     * 
     * 获取和设置高度
     * getSize() 返回数组,[0]:width [1]:height
     * setSize(width,height,flag) flag:为true时显示动画,仅限于Mac OS X
     * 获取和设置坐标
     * getPosition() 返回数组,[0]:x [1]:y
     * setPosition(x,y,flag) flag:为true时显示动画,仅限于Mac OS X
     */
    
    /**
     * 全屏窗口
     * fullscreen:true
     * 如果设置了width、heigh、x、y,系统会忽略这些属性,仍然是全屏显示
     * maxWidth、maxHeight
     * fullscreenable:false,在Mac OS X会阻止单击最大化按钮隐藏菜单
     * win.setFullScreen(true);方法可以动态将窗口设置为全屏状态,但fullscreenenable属性必须是true
     * 通过win.isFullScreen();方法可以获取窗口是否为全屏
     */
    const {app,BrowserWindow} = require('electron');
    function createWindow(){
        win = new BrowserWindow({
            //fullscreen:true,
            //fullscreenable:false,
              800, height: 600,minWidth: 400, minHeight: 300,
            //maxWidth: 1000, maxHeight: 700,
            //,transparent: false, frame: true, show: false
            webPreferences:{
                nodeIntegration: true, // 是否集成 Nodejs
                enableRemoteModule: true,
                contextIsolation: false,
                //,preload:path.join(__dirname,'index.js')
            }
        });
        win.loadFile('index.html');
        // win.setFullScreen(true);
        // win.isFullScreen();
        win.on('closed',()=>{
            console.log('closed')
            win=null;
        });
    }
    app.on('ready',createWindow);
    app.on('window-all-closed',()=>{
        console.log('window-all-closed');
        if(process.platform!='darwin'){
    
        }
    });
    app.on('activate',()=>{
        console.log('activate');
        if(win==null){
            createWindow();
        }
    });

    index.html

    <!DOCTYPE html>
    <html>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>窗口大小</title>
    <script src="event.js"></script>
    <body>
        <img src="./images/shj8.jpg">
        
        <h1>书名:<i>山海经</i></h1>
        <br/>
        <br/>
        出版社:<u>大地出版社</u>
        <br/>
        <br/>
        原价:<strike>69</strike>元    促销价:59
        <br/>
        <br/>
        <button onclick="onClick_GetSizePosition()">获得窗口大小和位置</button>
        <br/>
        <br/>
        <button onclick="onClick_SetSizePosition()">设置窗口大小和位置</button>
    </body>
    </html>
    View Code

    event.js

    const remote = window.require('electron').remote;
    function onClick_GetSizePosition()
    {
        const win = remote.getCurrentWindow();
        console.log("宽度:",win.getSize()[0]);
        console.log("高度:",win.getSize()[1]);
        console.log("X:",win.getPosition()[0]);
        console.log("Y:",win.getPosition()[1]);
    }
    
    function onClick_SetSizePosition()
    {
        const win = remote.getCurrentWindow();
        win.setSize(400,400);
        win.setPosition(12,30);
    }
    View Code
  • 相关阅读:
    Microsoft Visual Studio 2008
    JavaScript动态添加|绑定事件
    超级实的js代码大全 [转]
    《dojo 边学边用》(02), djConfig配置解说
    整合ckeditor_3.0.1和ckfinder_aspnet_1.4.1.1,配置随笔记录
    everybody is a tourist。you and me。
    测试并提升你的jQuery选择器水平
    php
    《dojo 边学边用》(01), 初识dojo,dojo简介和框架概览
    HTML 三栏自动适应
  • 原文地址:https://www.cnblogs.com/xiaoruilin/p/14782756.html
Copyright © 2020-2023  润新知