在电子的同一浏览器窗口中加载新的html答案

【问题标题】：Loading new html in the same browserwindow in electron在电子的同一浏览器窗口中加载新的html
【发布时间】：2020-11-30 18:48:01
【问题描述】：

我对 electron.js 完全陌生，我只是想在同一个 BrowserWindow 中加载一个新页面（称为 index2.html）（它已经加载了 index1.html ) 在按钮单击上。我试图完成此操作的方式是单击按钮时，对应于 BrowserWindow 的渲染进程向主进程发送一个 ipc 事件，然后主进程将一个新的 html 加载到BrowserWindow 通过调用 loadFile()。我在这里面临的问题是单击按钮后，新页面无法加载。我已经使用控制台打印验证了主进程正在捕获 ipc 事件。此外，窗口上的其他操作（如窗口最小化）正在运行。有人可以帮助我了解我哪里出错了吗？

This is my directory structure

package.json

{
    "name": "hello-world",
    "version": "1.0.0",
    "main": "main.js",
    "devDependencies": {
        "electron": "^9.2.0"
    },
    "scripts":{
        "start":"electron ."
    }
}

main.js

console.log("Main process running");
const electron = require("electron");
const app = electron.app ;
const BrowserWindow = electron.BrowserWindow;
const path = require("path");
const url = require("url");
const ipc = electron.ipcMain 
let win;


function createWindow()
{
    
    win = new BrowserWindow({
        webPreferences: {nodeIntegration: true},
        show:false
    });
    win.loadFile('src/html/index.html');
    win.on('ready-to-show',()=>{
        win.show();
    })
    ;
    
    
}

ipc.on('login-success',function(event,arg){
    console.log("Hello World");//Making sure that main process catches the event
    //load new url
    win.loadFile('src/html/index2.html');//does nothing
    /*
    the following command works though
    win.minimize();
    */
    
    

});
app.on('ready',createWindow);

index.html

<html>

<head>
  <link rel="stylesheet" href="../css/index.css">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>ChatIn</title>
</head>

<body>
  <div class="main">
    <p class="sign" align="center">Sign in</p>
    <form class="form1">
      <input class="un " type="text" align="center" placeholder="Username">
      <input class="pass" type="password" align="center" placeholder="Password">
      <button class="submit" align="center">Sign in</button>
      <p class="forgot" align="center"><a href="#">Forgot Password?</p>
            
      <script>
        require("../js/login.js")
      </script>         
    </div>
    
</body>

</html>

login.js

const electron = require("electron");
const ipc = electron.ipcRenderer;

const btnArray = document.getElementsByClassName("submit");
const loginBtn = btnArray[0];

loginBtn.addEventListener('click',(event)=>{
   ipc.send('login-success');
},false);

index2.html（我认为它不会影响手头的问题，但它仍然存在）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome</title>
    <link rel="stylesheet" href="../css/index2.css">
</head>
<body>
    <section class="msger">
        <header class="msger-header">
          <div class="msger-header-title">
            <i class="fas fa-comment-alt"></i> SimpleChat
          </div>
          <div class="msger-header-options">
            <span><i class="fas fa-cog"></i></span>
          </div>
        </header>
      
        <main class="msger-chat">
          <div class="msg left-msg">
            <div
             class="msg-img"
             style="background-image: url(https://image.flaticon.com/icons/svg/327/327779.svg)"
            ></div>
      
            <div class="msg-bubble">
              <div class="msg-info">
                <div class="msg-info-name">BOT</div>
                <div class="msg-info-time">12:45</div>
              </div>
      
              <div class="msg-text">
                Hi, welcome to SimpleChat! Go ahead and send me a message. ????
              </div>
            </div>
          </div>
      
          <div class="msg right-msg">
            <div
             class="msg-img"
             style="background-image: url(https://image.flaticon.com/icons/svg/145/145867.svg)"
            ></div>
      
            <div class="msg-bubble">
              <div class="msg-info">
                <div class="msg-info-name">Sajad</div>
                <div class="msg-info-time">12:46</div>
              </div>
      
              <div class="msg-text">
                You can change your name in JS section!
              </div>
            </div>
          </div>
        </main>
      
        <form class="msger-inputarea">
          <input type="text" class="msger-input" placeholder="Enter your message...">
          <button type="submit" class="msger-send-btn">Send</button>
        </form>
      </section>
</body>
</html>

我尝试过/注意到的事情

使用 loadURL 代替 loadFile 没有帮助。使用上述方法尝试加载网站而不是本地文件也不起作用。
在主 ipc 块中使用 win=null不会关闭浏览器窗口，但 win.close() 或 win.destroy() 有效，不知道为什么。
使用 var 而不是 let 作为 win 变量没有帮助。
将新的 html 加载到 新的浏览器窗口 并关闭以前的浏览器窗口可以解决问题，但仍然不是最优雅的方式完成工作。

【问题讨论】：

标签： javascript electron desktop-application

【解决方案1】：

试试这个

const { pathToFileURL } = require('url');

//...

win.loadUrl(pathToFileURL(path.resolve(__dirname, './html2.html')).href);

【讨论】：

感谢您的建议，我试过了，但是这个方法也不起作用，点击按钮没有反应:(。