电子对话框不会阻止与页面的交互

Question

所以这可能是一个简单的修复，但我一直在研究，并没有找到解决方案。我假设电子默认这样做了。在我的Electron应用中，我使用renderer api从remote进程调用对话框。一切正常，但是，我的对话框不会阻止用户与BrowserWindow的其余部分进行交互。我的两个功能如下

// function for saving a gantt project projects are serialized into a JSON file
// the JSON is then stringified for human readiblity then thru the dialog api is saved to
// users computer
const saveGantt = () => {
  let content = gantt.serialize();
  content = JSON.stringify(content, null, '\t');
  dialog.showSaveDialog(
    {
      defaultPath: `C:\\Users\\${process.env.USERNAME}\\Documents\\`,
      filters: [
        {
          name: 'json',
          extensions: ['json'],
        },
      ],
    },
    (filename) => {
      if (filename === undefined) {
        return;
      }
      fs.writeFile(filename, content, (err) => {
        if (err) {
          dialog.showErrorBox(
            'Save Failed',
            `An error occured saving the file ${err.message}`,
          );
          return;
        }
        dialog.showMessageBox({
          type: 'none',
          title: 'Ganttron',
          message: 'The chart was successfully saved',
          buttons: ['OK'],
        });
      });
    },
  );
};

// function that loads a gantt project uses the dialog api to open a JSON file from
// the users computer then it is parsed to return a JSON object that is then parsed by
// the gantt api
const loadGantt = () => {
  dialog.showMessageBox(
    {
      type: 'none',
      title: 'Ganttron',
      message: 'This will clear the gantt chart and load new data',
      buttons: ['Cancel', 'OK'],
    },
    (response) => {
      if (response === 1) {
        gantt.clearAll();
        dialog.showOpenDialog(
          {
            defaultPath: `C:\\Users\\${process.env.USERNAME}\\Documents`,
            filters: [
              {
                name: 'json',
                extensions: ['json'],
              },
            ],
          },
          (fileName) => {
            if (fileName === undefined) {
              return;
            }
            fs.readFile(fileName[0], 'utf-8', (err, data) => {
              quickSaveFileName = fileName[0].toString();
              if (err) {
                dialog.showErrorBox(
                  'Load Failed',
                  `Cannot read file ${err.message}`,
                );
              }
              const loadedData = JSON.parse(data);
              gantt.parse(loadedData);
            });
          },
        );
      }
    },
  );
};

我正在使用我的两个函数传递回调。我知道如果你不传递回调，它将阻止进程，但不会阻止用户在对话框外进行交互。我错过了一些简单的东西，还是必须将其侵入电子？

Answer 1

所以对于任何提出这个问题的人。我想到了。 我使用remote api函数getCurrentWindow()从主线程返回BrowserWindow实例。您可以使用它在初始化对话框时将其放在第一个参数中。就这样

import electron, { remote } from 'electron';

const { dialog } = electron.remote;

const win = remote.getCurrentWindow();

// function for saving a gantt project projects are serialized into a JSON file
// the JSON is then stringified for human readiblity then thru the dialog api is saved to
// users computer
const saveGantt = () => {
  let content = gantt.serialize();
  content = JSON.stringify(content, null, '\t');
  dialog.showSaveDialog(
    win,
    {
      defaultPath: `C:\\Users\\${process.env.USERNAME}\\Documents\\`,
      filters: [
        {
          name: 'json',
          extensions: ['json'],
        },
      ],
    },
    (filename) => {
      if (filename === undefined) {
        return;
      }
      fs.writeFile(filename, content, (err) => {
        if (err) {
          dialog.showErrorBox(
            win,
            'Save Failed',
            `An error occured saving the file ${err.message}`,
          );
          return;
        }
        dialog.showMessageBox(
          win,
          {
            type: 'none',
            title: 'Ganttron',
            message: 'The chart was successfully saved',
            buttons: ['OK'],
          },
        );
      });
    },
  );
};

// function that loads a gantt project uses the dialog api to open a JSON file from
// the users computer then it is parsed to return a JSON object that is then parsed by
// the gantt api
const loadGantt = () => {
  dialog.showMessageBox(
    win,
    {
      type: 'info',
      title: 'Ganttron',
      message: 'This will clear the gantt chart and load new data',
      buttons: ['Cancel', 'OK'],
    },
    (response) => {
      if (response === 1) {
        gantt.clearAll();
        dialog.showOpenDialog(
          win,
          {
            defaultPath: `C:\\Users\\${process.env.USERNAME}\\Documents`,
            filters: [
              {
                name: 'json',
                extensions: ['json'],
              },
            ],
          },
          (fileName) => {
            if (fileName === undefined) {
              return;
            }
            fs.readFile(fileName[0], 'utf-8', (err, data) => {
              quickSaveFileName = fileName[0].toString();
              if (err) {
                dialog.showErrorBox(
                  win,
                  'Load Failed',
                  `Cannot read file ${err.message}`,
                );
              }
              const loadedData = JSON.parse(data);
              gantt.parse(loadedData);
            });
          },
        );
      }
    },
  );
};

在对话框关闭之前，它将阻止与当前窗口的交互。