Как перенаправить в другое окно в Electron JS без нового окна - PullRequest
0 голосов
/ 20 марта 2020

У меня есть вопрос о том, как перенаправить на другую страницу с помощью Electron Js.

В документации только описано, как открыть новое окно. Но в моем случае я не могу sh открыть новое окно. Это то, что я пытался до сих пор, но он не отвечает:

логин. 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()
})

Вышеуказанные коды модифицированы из существующих открывать новую страницу в новом браузере коды окон. Я попробовал следующее без особого успеха. Мне не удалось найти полезную помощь по StackOverflow, поэтому я открываю эту ветку, но если кто-то действительно спрашивал об этом раньше, я тоже буду рад удалить эту ветку. Просто дай мне знать. Спасибо.

Если вам нужно посмотреть мой HTML, вот оно: логин. 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>

1 Ответ

1 голос
/ 20 марта 2020

Вы можете использовать электронный файл. js для настройки электронного окна и импортировать в этот файл приложение. js сервер с express. Таким образом, вы можете использовать express для перенаправления на другую страницу в качестве веб-приложения. Это электрон. 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)

А это приложение. 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

А затем вы должны отредактировать свой пакет. json файл Вы должны отредактировать эти два атрибута:

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

Для запуска приложения напишите npm start

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...