如何在 BrowserWindow 中加载特定的 html 文件答案

【问题标题】：How to load a specific html file in the BrowserWindow如何在 BrowserWindow 中加载特定的 html 文件
【发布时间】：2019-04-17 13:20:50
【问题描述】：

我正在 Electron 中创建一个应用程序。我仍然是框架的新手，但是我做了一些关于如何在主渲染器和渲染器之间进行通信的阅读使用 ipcMain 和 ipcRenderer 的进程。我有一个简单的 html 页面当应用程序准备好并在渲染器进程中加载的登录表单我听到表单上提交按钮的点击事件（出于测试目的，我已经硬编码了用户名和密码），我运行了一个简单的检查来查看如果密码和用户名与我硬编码的匹配。目标是然后根据结果在浏览器窗口中加载特定的 html 文件的支票。我的 render.js 看起来像这样：

const ipc = require('electron').ipcRenderer;
document.querySelector('#btn').addEventListener('click', function (event){
event.preventDefault();
const username = 'Belinda';
const password = 'admin';

const inputUsername = document.querySelector('#username').value;
const  inputPassword = document.querySelector('#password').value;

if(inputUsername != username || inputPassword != password){
    ipc.send('errortest', function (){
        alert('Error')

    });
}else{
    ipc.send('successtest', function (){ 
        alert('Success')
    });
 };
});

在 main.js 我听这样的事件：

ipc.on('successtest', function (){
    mainWindow.loadFile('admin.html');
});
ipc.on('errortest', function(){
   console.log('error');
   mainWindow.loadFile('error.html');
});

我的 index.html 页面如下所示：

<!doctype html>
  <html lang="en">
  <head>
  <meta charset="utf-8" />
  <link rel="stylesheet" 
  href="assets/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/fonts/@fortawesome/fontawesome- 
  free/css/all.css">
  <link rel="stylesheet" href="assets/stylesheets/main.css">

  <!-- <link rel="import" href="./admin.html"> -->
 <link rel="import" href="./admin.html">
 <link rel="import" href="./error.html">
 </head>
 <body id="body">
 <form class="form-signin" method="POST">
    <div class="text-center mb-4">
      <img class="mb-4" src="./assets/icons/logo4.jpg" alt="" width="80" 
     height="40">
    </div>
    <div class="form-group">
      <input type="text" value="" autofocus class="form-control form- 
    control-sm" id="username" placeholder="Username">
    </div>
    <div class="form-group">
      <input type="password" autofocus value="" class="form-control form- 
    control-sm success" id="password" placeholder="Password">
    </div>
    <button class="btn btn-lg btn-success btn-block btn-sm" id="btn" 
    type="submit">Log in</button>
    <p class="mt-5 mb-3 text-muted text-center">&copy; Save Money 
   Solutions 2018-19</p>
 </form>

 <script>
 require('./renderer');
 </script>
 </body>
 </html>

运行应用程序仅适用于“errortest”事件。关于我如何的任何建议解决这个问题。或有关如何进行基本登录和重定向路径的任何想法在电子。我确实尝试了一些研究，但我没有遇到任何问题有用。谢谢

【问题讨论】：

你能发布你的 HTML 吗？
感谢 html 更新。我克隆了“电子快速入门”存储库，并将 index.html 更改为如下：

Click 并使用了你的 js 文件。这对我有用（我去管理页面）。一些提示：请记住，您可以在 Electron 中使用“普通”的 Chrome 开发工具，它可以帮助您进行调试。还可以尝试“提醒”选择器查询中的值，以确认它们是您所期望的。
也许尝试类似地让它在电子快速入门 repo 上运行：github.com/electron/electron-quick-start 以最小的方式，然后将知识转移到您的实际应用程序中
我在这里做了一个快速入门的小例子：github.com/grahammcallister/electron-quick-start-logindemo
您关于登录的更广泛的问题：这取决于您的应用程序和用户的需求 :-) 例如，您可能需要使用已登录用户的 Windows 凭据，或者您正在签名到后端 API。 Electron 不建议或限制您使用特定的做事方式。

标签： electron

【解决方案1】：

我相信您的问题是如何获取用户名和密码输入的值。

由于您的两个输入都有 id，我认为您应该像这样获得它们的值：

const inputUsername = document.getElementById('username').value;
const inputPassword = document.getElementById('password').value;

使用getElementById 函数。

【讨论】：