electron中与iframe嵌入的第三方系统通信方式

【需求】：

electron中通过iframe引用第三方系统，关闭electron时，通知系统退出系统清除session

【解决方法】

1. electron

app.vue中

<template>
  <div id="app1">  
    <Mytitle />  
    <div id="app" style="height:auto;">      
      <iframe id="unionConfig" ref="unionConfigRef" style="background-color: #fff;width:100%;height:100%;" :src="url" frameborder="0" scrolling="auto"></iframe>      
    </div>
  </div>
</template>

<script></script>

Mytile.vue

<script>
ipc.on('mainWindowClose', (event, message) => {    
  let dialog = remote.dialog;  
  dialog.showMessageBox({
    type: 'warning',
    title: '退出系统',
    message: '您确定要退出系统么？',
    buttons: ['OK', 'Cancel']
  }, function (index) {
    if (index === 0) {      
      // 向app.vue中的iframe发送消息
      const oIframe = document.getElementById('unionConfig');
      oIframe.contentWindow.postMessage('统一配置工具APP向系统发送退出消息', '*')      
      remote.mainWindow = null;
      // app.quit(); // 不要用quit();试了会弹两次
      remote.app.exit();// exit()直接关闭客户端，不会执行quit()
    } else {
      console.log('您的选择:Cancel');
    }
  }) 
})

</script>

2.第三方系统的app.vue中监听message消息

app.vue

<script>
window.addEventListener('message', (event) => {
    let data = event.data;
    switch (data.cmd) {
      case 'logout':
        console.log('执行退出，清session：', data)        
        break;
      default:        
        break;
    }
  });
</script>