Question

我对如何使用ElectronJs重定向到另一个页面有疑问。

文档仅涉及如何打开新窗口。但就我而言，我不希望打开新窗口。到目前为止，这是我一直在尝试的方法，但未响应：

login.js

const {BrowserWindow} = require('electron')
const loginBtn = document.getElementById('loginBtn')

loginBtn.addEventListener('click', () => {
    let win = BrowserWindow
    win.on('close', () => { win = null })
    win.loadURL('file:///Users/cadellteng/Desktop/Timetrack/main_page.html')
    win.show()
})

以上代码是从现有代码修改为在新浏览器窗口中打开新页面的代码。我也尝试了以下方法，但也没有太大的成功

loginBtn.addEventListener('click', () => {
        window.location.href = 'main_page.html'
    })

希望有人协助。我无法在StackOverflow上找到有用的帮助，所以我打开了该线程，但是如果以前确实有人问过这个问题，我也很乐意删除该线程。请让我知道。谢谢。

如果您需要查看我的HTML，则为： login.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Timetrack</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
    <link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
    <link rel="stylesheet" href="assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="assets/css/Login-Form-Clean.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body style="background-color: rgb(241,247,252);">
    <nav class="navbar navbar-light navbar-expand-md" style="background-color: black;">
        <div class="container-fluid"><a class="navbar-brand app-name" id="app-name" href="#" style="font-family: Roboto, sans-serif;width: 165px;color: white;"><b>Timetrack <sub>by Pyxel Inc</sub></b></a></div>
    </nav>
    <div class="flex-fill login-clean" style="background-size: auto;">
        <form method="post">
            <h2 class="sr-only">Login Form</h2>
            <div class="illustration"><i class="icon ion-ios-clock"></i></div>
            <div class="form-group"><input class="form-control" type="email" name="email" placeholder="Email"></div>
            <div class="form-group"><input class="form-control" type="password" name="password" placeholder="Password"></div>
            <div id="loginBtn" class="form-group"><button class="btn btn-primary btn-block" type="submit">Log In</button></div><a class="forgot" href="#">Forgot your email or password?</a></form>
    </div>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="login.js"></script>
</body>

</html>

Answer 1

您可以使用electron.js文件设置电子窗口，并在该文件中导入带有express的app.js服务器。这样，您可以使用express将其重定向为Web应用程序。
这是electron.js文件

const server = require('./app');
var path= require('path')
const { app, BrowserWindow } = require('electron')

var mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1280,
    height: 720,
    icon: path.join(__dirname, 'public/img/icona-app.png'),
    autoHideMenuBar: true,
    useContentSize: true,
    resizable: true,
    webPreferences: {
      devTools: false
    }
  });
  mainWindow.loadURL('http://localhost:8080/');

}

app.on('ready', createWindow)

这是app.js文件

var express = require('express')
var app = express()

app.listen(8080, function () {
    console.log('Your application is listening on port 8080!')
})

app.get('/', function(req, res){
    res.sendFile(__dirname + "/public/login.html");
})
module.exports=app

然后您必须编辑package.json文件
您必须编辑这两个属性：

"main": "electron.js",
"scripts": {
   "start": "npm install && electron electron.js --no-sandbox"
},

要启动应用程序，请写npm start

如何在没有新窗口的情况下重定向到ElectronJS中的其他窗口

1 个答案: