CODEWITHSUNDEEP
node.jselectron
Cadell Teng
Cadell Teng

Reputation: 244

How to redirect to a different Window in ElectronJS without a new Window

I have a question on how to redirect to a different page with ElectronJs.

The documentation only covered how to open a new window. But in my case, I do not wish to open a new window. This is what I've been trying so far but it's not responding:

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()
})

The above codes are modified from existing open a new page in a new browser window codes. I tried the following without much success too

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

Hoping for someone to assist. I wasn't able to find helpful assistance on StackOverflow so I'm opening this thread, but if someone did indeed has asked this before, I'll be happy to delete this thread too. Just let me know. Thanks.

If you need to see my HTML, here it is: 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>

Upvotes: 4

Views: 7334

Answers (1)

sfale
sfale

Reputation: 220

You can use an electron.js file to setup the electron window and import in this file an app.js server with express. In this way you can use express for redirect to other page as a web application.
This is the electron.js file

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)

And this is the app.js file

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

And then you must edit your package.json file
You must edit this two attributes:

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

To start the application write npm start

Upvotes: 3

Related Questions