J'ai besoin de l'aide d'un expert JavaScript concernant une application que je construis avec Electron. Le cœur du problème est que si je m'éloigne de la page principale (index.html) et y retourne brièvement la page, mais très affiche les éléments div et ul qui composent le menu à onglets vertical qui se trouve sur le côté gauche de la page (voir les photos ci-dessous).
Ce que mon collègue et moi-même n'arrivons pas à comprendre et ne pouvons pas trouver des informations adéquates sur le web, c'est comment corriger ou ajuster cela. Il a été suggéré par une personne que nous savons que peut-être construire une sorte de moteur de rendu pour maintenir différents threads de fenêtre comme ils sont créés dans Main.js, mais il ne savait pas comment et nous avons trouvé des informations sur la façon de faire. Est-ce le bon chemin?
Ou est-ce simplement un cas de code égaré ou manquant qui empêche la page de se charger correctement à chaque fois?
Ou quelque chose d'autre tous ensemble? Toute aide serait grandement appréciée car mon dos est contre sur le mur pour résoudre ce problème. Merci d'avance!
BrowserWindow rendu dans Electron App
Index.html rendu:
post-rendu Index.html:
main.js:
const electron = require('electron');
// Module to control application life.
const {app} = electron;
// Module to create native browser window.
const {BrowserWindow} = electron;
var express = require('express');
var expressapp = express();
var hostname = 'localhost';
var port = 3000;
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;
function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 1920,
height: 1080,
webPreferences: {
nodeIntegration: true,
resizable: true,
fullscreenable: true,
maximizable: true,
minamizable: true,
movable: true,
autoHideMenuBar: false,
allowDisplayingInsecureContent: true,
allowRunningInsecureContent: true
}
})
// and load the index.html of the app.
win.loadURL(`file://${__dirname}/index.html`);
// Open the DevTools.
win.webContents.openDevTools();
// Emitted when the window is closed.
win.on('closed',() => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null;
});
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed',() => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate',() => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow();
}
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
expressapp.use(express.static(__dirname + '/public'));
expressapp.listen(port, hostname, function() {
console.log(`Server running at http://${hostname}:${port}`);
});
Code Index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type:"text/css" href="css/jquery-ui.min.css">
<link rel="stylesheet" type:"text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type:"text/css" href="css/jquery.scrollbar.css">
<link rel="stylesheet" type:"text/css" href="css/tabs.css">
<link rel="stylesheet" type:"text/css" href="css/persian-datepicker-0.4.5.min.css">
<link rel="stylesheet" type:"text/css" href="css/clockpicker.css">
<link rel="stylesheet" type:"text/css" href="styles.css">
<link rel="stylesheet" type:"text/css" href="css/entry.css">
<link rel="stylesheet" type:"text/css" href="css/navbar.css">
<link rel="stylesheet" type:"text/css" href="css/modal.css">
<meta id="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
...
<form name="mainForm">
<div id="sections">
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
<li><a href="#section5">Section 5</a></li>
<li><a href="#section6">Section 6</a></li>
<li><a href="#section7">Section 7</a></li>
<li><a href="#section8">Section 8</a></li>
<li><a href="#section9">Section 9</a></li>
<li><a href="#section10">Section 10</a></li>
<li><a href="#section11">Section 11</a></li>
</ul>
...
<script>
window.jQuery = window.$ = require('jquery');
</script>
<script src="js/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.scrollbar.min.js"></script>
<script src="js/persian-date.min.js"></script>
<script src="js/persian-datepicker-0.4.5.min.js"></script>
<script src="js/clockpicker.js"></script>
<script src="js/jqwidgets/jqxcore.js"></script>
<script src="js/jqwidgets/jqxexpander.js"></script>
<script src="js/jqwidgets/jqxinput.js"></script>
<script src="js/jqwidgets/jqxpasswordinput.js"></script>
<script src="js/jqwidgets/jqxbuttons.js"></script>
<script src="js/jqwidgets/jqxvalidator.js"></script>
<script src="js/data.js"></script>
<script src="js/model.js"></script>
<script src="js/view.js"></script>
<script src="js/form-init.js">
</script>
</form>
</body>
</html>
code fenêtre du navigateur Altered:
let win;
function createWindow() {
// Create the browser window.
win = new BrowserWindow({
show: false,
width: 1920,
height: 1080,
backgroundColor: '#4d6b9e',
webPreferences: {
nodeIntegration: true,
resizable: true,
fullscreenable: true,
maximizable: true,
minamizable: true,
movable: true,
autoHideMenuBar: false,
allowDisplayingInsecureContent: true,
allowRunningInsecureContent: true
}
})
win.loadURL(`file://${__dirname}/index.html`);
// and load the index.html of the app.
win.once('ready-to-show',() => {
win.show()
})
Merci pour votre commentaire, @Vadim. J'apprécie la considération. D'abord, je n'ai peut-être pas bien décrit le problème. Essentiellement, la deuxième photo est comment la page devrait ressembler lors de la première entrée. La 1ère photo est ce que vous voyez brièvement (~ 1 sec) quand vous entrez. La liste non ordonnée à puces sous-jacente à l'environnement à onglets s'affiche lorsqu'elle ne le devrait pas. Malheureusement, changer la couleur de fond ne réglerait pas cela. Deuxièmement, je n'avais pas entendu parler de l'utilisation du serveur express dans Electron. Pourquoi donc? Avant votre commentaire, je n'avais rien vu en ligne sur le fait de ne pas l'utiliser. – Steve
@Steve Il semble donc que certains éléments sont rendus sans styles et que le style est appliqué peu de temps après. Essayez de créer une fenêtre de navigateur cachée, puis rendez-la visible quand elle déclenche le ['ready-to-show'] (http://electron.atom.io/docs/api/browser-window/#using-ready-to- show-event). –
@Steve Comme pour 'express' ... Si vous utilisez un serveur' express' in-app/local qui signifie que toutes vos ressources sont disponibles localement, Electron peut charger les documents '.html' et toutes les ressources associées directement depuis le disque , alors quel est le point de tourner un serveur HTTP? De plus, lorsqu'un utilisateur ouvre un site Web distant dans son navigateur, JavaScript sur ce site Web peut accéder à un serveur HTTP fonctionnant sur la machine de l'utilisateur, lisez l'exploit [Trend Micro] (https://bugs.chromium.org/p/projet-zéro/problèmes/détail? id = 693 & redir = 1). –