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

如何解决在电子的同一浏览器窗口中加载新的html

我对electron.js完全陌生，我只是想在同一浏览器窗口（已加载 index1.html）中加载一个新页面（称为 index2.html ）。 ）。我试图完成此操作的方法是单击按钮时，对应于BrowserWindow的呈现过程将ipc事件发送到主进程，然后主进程将新的html加载到通过调用loadFile（）来打开BrowserWindow。我在这里面临的问题是单击按钮后，新页面无法加载。我已经使用控制台打印验证了主进程捕获了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 for win变量没有帮助。
将新的html加载到新的浏览器窗口，并关闭以前的浏览器窗口可以达到目的，但仍然感觉不是最优雅的方式完成工作。

解决方法

尝试

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

//...

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

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

如何解决在电子的同一浏览器窗口中加载新的html

解决方法

相关推荐