子窗口关闭前,询问是否提交表单electron

需求:子窗口关闭前,询问是否提交表单?

思路1:渲染进程监听子窗口close事件,阻止默认行为,询问处理后,再关闭窗口

// 以下代码不能实现需求
// remote.getCurrentWindow()的监听close,e.preventDefault()无法阻止窗口关闭,异步
//渲染进程中render.js
// 需求:离开前,询问是否提交表单?
// 以上代码不能实现需求

// 提交表单
    function saveFormAsync(askMessage) {
        return new Promise((res, rej) =>{
            const answer = window.confirm(askMessage)
            if (!answer) {
                res()
                return
            }
            //提交表单逻辑部分
            res()
        })
        
    }
document.addEventListener('DOMContentLoaded',()=>{
    const win = remote.getCurrentWindow()
    win.on('close', async (e) => {
       e.preventDefault(); 
        //询问是否提交表单
        await saveFormAsync('是否提交本次修改?')
        win.destory()
    })
})

 

以下方案可实现需求

思路2:
  1.   使用主进程监听close, 阻止默认行为并childwin.webContents.send此事件,
  2.   渲染进程监听到此事件ipcRenderer后执行询问处理操作后,
  3.   关闭子窗口remote.getCurrentWindow().destory() [注:destory不会触发close事件]

主进程的close的监听是同步行为,可使用e.preventDefault()来阻止

//主进程 childWin 子窗口
... childWin.on('close', (e) => { e.preventDefault(); childWin.webContents.send('close1') })
...
//渲染进程
...
// 提交表单
    function saveFormAsync(askMessage) {
        new Promise((res, rej) =>{
            const answer = window.confirm(askMessage)
            if (!answer) {
                res()
                return
            }
            // 提交表单部分逻辑
            res()
        })
        
    }
    // 监听主进程通知
    ipcRenderer.on('close1', async (e) => {
        await saveFormAsync('是否保存本次修改?')
        remote.getCurrentWindow().destroy()
    })
...

  

原文地址:https://www.cnblogs.com/baixinL/p/14278737.html