【electron】electron-builder-start 拦截window.open，实现自定义窗口

【练习代码git】：https://github.com/SmileEricXin/electronPractice.git

dev分支      提交：fea：拦截window.open， 自定义窗口

 

【说明】：

    为了引入VUE，使用了electron-forge，使得 electron-webpack跑起来会报错，因为我的目的是学习各个功能，还不是系统性的，所以暂时不理会这种错误，不过在学习过程中，会思考这其中的原因。

【拦截方法】：

  

// renderer 进程代码
<script>
export default {
  name: 'container',
  data () {
    return {

    }
  },
  methods: {
    openBaidu () {
      // 通过window.open打开自定义协议app://
      window.open('app://test?name=xin')
    }
  }
}
</script>

<template>
<div>
  <button type="button" @click="openBaidu">open baidu</button>
  <button>open sina</button>
</div>
</template>

// main进程代码

let tmpWin = null
app.once('ready', () => {

  // 准备创建自定义窗口
  // access 是url，即 app://test?name=xin
  app.on('protocol-test', (e, access) => {
    console.log('[protocol]access:', access)

    // 创建新窗口
    tmpWin = new BrowserWindow({
      width: 300,
      height: 100
    })

    tmpWin.on('closed', () => {
      console.log('tmpWin closed')
      tmpWin = null
    })
  })
})

app.once('ready', () => {
  
  // 拦截new-window事件，起到拦截window.open的作用
  mainWindow.webContents.on('new-window', (e, url, frameName, disposition, options, additionalFeatures) => {
    
    // 阻止创建默认窗口
    e.preventDefault()
    
    // 在这里可以实现不同的协议
    if (/^app:\/\//.test(url)) {
      app.emit('protocol-test', {
        sender: mainWindow.webContents
      }, url)
    }
  })
})