5、Electron 窗口的尺寸和位置以及全屏-CFANZ编程社区

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,
         width: 800, height: 600,minWidth: 400, minHeight: 300,
        //maxWidth: 1000, maxHeight: 700,
        //,transparent: false, frame: true, show: false
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

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

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

<!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

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

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

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