electron v11 用本地html文件 打开新窗口

目标

通过main.js打开主进程窗口，对应index.html,里面有一个按钮【打开新窗口】，按钮绑定的点击事件会打开一个新窗口，里面的内容是newWin.html

环境

效果

遇到的坑以及两种解决方案

教学视频里按钮跳转方法是

btn.onclick = ()=>{
         newWin = new BrowserWindow({
             width:500,
             height:500,
         })
         newWin.loadFile('newWin.html')
         newWin.on('close',()=>{win=null})

     }
}

• 直接写出来报的错：Not allowed to load local resource: file:///E:/Softwares/Learn/Electron/Projects/demo1/newWin.html

• 解决方案1：webPreferences里要加这个，electron官网里不推荐这么用, 要注意不是加载main.js里的那个new BrowserWindow, 要加在按钮的点击函数里

webPreferences: {
                  webSecurity: false      //不然新打开的remote不能访问本地html
            },

这个是可以的，调试的时候不能只看新开的窗口的，看下主窗口的开发者工具，也就是浏览器的F12

• 解决方案2：不把webSecurity设置为false:

const path = require('path')  //添加

const btn = this.document.querySelector('#btn')
const remote = require('electron').remote;
const BrowserWindow = remote.BrowserWindow;

window.onload = function () {
    btn.onclick = () => {
        newWin = new BrowserWindow({
            width: 500,
            height: 500,
            webPreferences: {
                nodeIntegration: true,
                enableRemoteModule: true, 
                //  webSecurity: false   //注释掉
            },
        })

        //使用path.resolve方法
        var viewPath = path.resolve('./render/','newWin.html');
        newWin.loadFile(viewPath);
        console.log(newWin)

        // newWin.loadFile("./render/newWin.html")

        newWin.on('close', () => {
            newWin = null
        })
    }
}