全屏展示下electron主进程和渲染进程不通信,同时又想通过自定义方法关闭主进程的解决方案

81 阅读1分钟

描述:因项目中引入了第三方的一些包,同时不想让渲染进程去干涉主进程的动作,可以通过在预加载文件中添加自定义标签的方式解决,主要适用于全屏操作时没办法关闭应用。

// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) {
      element.innerText = text
    }
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
  // 适用于全屏展示,但又不想在渲染进程中操作主进程
  const userAgent = navigator.userAgent.toLowerCase();
  if (userAgent.indexOf(' electron/') !== -1) {
    const first = document.body.firstChild
    const dv = document.createElement('div');
    dv.style.position = 'fixed';
    dv.style.top = '15px';
    dv.style.right = '15px';
    dv.style.zIndex = '5';
    dv.innerHTML = '<button>关闭</button>';
    document.body.insertBefore(dv, first)
    const { ipcRenderer } = require('electron');
    dv.onclick = () => {
      ipcRenderer.send('close', { type: 5, msg: '关闭'})
    }
  }
})

效果预览 image.png