电子从菜单栏打开全新的全屏窗口

时间:2016-04-12 00:03:13

标签: javascript node.js electron

我有一个在菜单栏中运行的电子应用程序。

代码目前主要基于现有的番茄钟应用程序(https://github.com/G07cha/pomodoro

当计时器到达某个点时,它会打开一个消息框:

ipc.on('end-timer', function() {
    $('.timer').circleProgress('value', 1);

    var isRelaxTime = remote.getGlobal('isRelaxTime');

    dialog.showMessageBox({
        type: 'info',
        title: 'Pomodoro',
        message: (isRelaxTime) ? 'Timer ended it\'s time to relax' : 'Back to work',
        buttons: ['OK'],
        noLink: true
    }, function() {
        if(isRelaxTime) {
            $('.timer').circleProgress({fill: { gradient: ["blue", "skyblue"]}});
        } else {
            $('#counter').text(remote.getGlobal('pomodoroCount'));
            $('.timer').circleProgress({fill: { gradient: ["orange", "yellow"]}});
        }

        ipc.send('start-timer');
    });
});

是否可以打开一个新窗口而不是消息框,并使其全屏显示?

基本上,确保用户看到它并在计时器启动时填充屏幕并允许自定义提供css等页面。

1 个答案:

答案 0 :(得分:1)

这取决于您是要从现有渲染器触发新渲染器,还是要从主进程中旋转它。

无论哪种方式,只需创建一个新的BrowserWindow实例并将URL加载到要加载的HTMl文件即可。

如果要从现有渲染器启动渲染器,则需要首先要求remote模块。这是一个例子:

const remote = require('remote');

// create a new BrowserWindow and pass it an object of options
var msgWindow = new remote.BrowserWindow({
  // full width & height of monitor without going into kiosk mode
  width: remote.screen.getPrimaryDisplay().size.width, 
  height: remote.screen.getPrimaryDisplay().size.height
  //, other options
});

// load your message file into new browserwindow
msgWindow.loadURL('file://' + __dirname + '/index.html');

// set variable to null when window is closed to clean it up
msgWindow.on('close', () => {
  msgWindow = null;
});

如果您是从主流程执行此操作,请将const remote = require('remote');替换为:

const electron = require('electron');
const BrowserWindow = electron.BrowserWindow;