第四章：Electron创建新窗口

最新推荐文章于 2024-08-15 16:31:41 发布

晓果博客

最新推荐文章于 2024-08-15 16:31:41 发布

阅读量4.3k

点赞数

分类专栏： Electron 文章标签： electron

本文链接：https://blog.csdn.net/huangxiaoguo1/article/details/107669727

版权

Electron 专栏收录该内容

18 篇文章 23 订阅

订阅专栏

效果

在这里插入图片描述

页面显示

<body>
 
  <button id="btn_open_new">打开新的窗口</button> 

  
  <script src="render/opennewwin.js"></script>
</body>

js操作

const btn =document.querySelector('#btn_open_new')


//渲染进程没法直接调用主进程中的模块，但是我们可以通过 electron中的remote模块间接的调用主进程中的模块

//remote执行主进程与渲染进程之间的IPC
const BrowserWindow =require('electron').remote.BrowserWindow

var newWin = null; 
window.onload=function(){
    btn.onclick=()=>{
        //调用 BrowserWindow打开新窗口
        newWin =new BrowserWindow({
            width:500,
            height:500,
            frame:true,//是否显示边缘框
            fullscreen:false //是否全屏显示
        })
        //打开一个新的窗口
        // newWin.loadURL(`file://${__dirname}/otherWin.html`);
        //新建窗口
        newWin.loadURL(`file://${__dirname}/index.html`);
        newWin.on('close',()=>{
            newWin=null
        })
    }
}