Я новичок в разработке приложений с Electron и Node JS и, похоже, сталкиваюсь с проблемами с тегом <webview src="https://app.example.com" nodeintegration preload="./app/js/preload.js"></webview> и моим файлом preload.js.
Изначально я разрабатывал файлы HTML и javascript, когда они были локальными для приложения, но теперь, когда я переместил файлы на веб-сервер, у меня возникло много проблем со старыми функциями renderer.js.
Я много играл с программированием, и мне удалось заставить некоторые вещи работать, но не все функции.Как будто выход из приложения работает, а сворачивание - нет, может быть, я чего-то упускаю.
мой файл index.html (локальный для приложения)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>n/a</title>
<link rel="stylesheet" href="app/css/style.css">
</head>
<body>
<!-- Load the VPN website -->
<webview id="odyssey-vpn" src="https://app.example.com/" nodeIntegration preload="./app/js/preload.js"></webview>
<!-- Fix issues with imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!-- Vendors -->
<script src="assets/vendors/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Fix issues with imports -->
<script>if (window.module) module = window.module;</script>
</body>
</html>
мой файл preload.js (локальный для приложения)
// Listen for contentLoaded
window.onload = function() {
// Require Preload Requirements
const { remote, ipcRenderer, shell } = require('electron')
//doesn't work
document.getElementById('minimize-button').addEventListener('click', () => {
remote.getCurrentWindow().minimize()
})
//doesn't work
document.getElementById('minmax-button').addEventListener('click', () => {
const currentWindow = remote.getCurrentWindow()
if (currentWindow.isMaximized()) {
currentWindow.unmaximize()
} else {
currentWindow.maximize()
}
})
// works
document.getElementById('exit-button').addEventListener('click', () => {
remote.app.quit()
})
};
мой index.phpфайл (удаленный на веб-сервере)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>n/a</title>
<!-- Fonts Styling -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="assets/vendors/bower_components/animate.css/animate.min.css">
<link rel="stylesheet" href="assets/vendors/bower_components/jquery.scrollbar/jquery.scrollbar.css">
<link rel="stylesheet" href="assets/vendors/bower_components/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="assets/css/app.min.css">
<link rel="stylesheet" href="assets/css/custom.css">
<link rel="stylesheet" href="assets/css/window.css">
<link rel="stylesheet" href="assets/css/mng.css">
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/5.8.0/firebase.js"></script>
</head>
<body data-ma-theme="indigo">
<div id="title-bar-login" class="mng-row">
<div class="col-md-6 btns-off"></div>
<div class="col-md-6 btns-on">
<div id="title-bar-btns">
<button id="minimize-button" class="window-button btn">
<i class="fas fa-fw fa-window-minimize" style="font-size: 0.9rem;"></i>
</button>
<button id="minmax-button" class="window-button btn">
<i class="far fa-fw fa-window-maximize" style="font-size: 0.9rem;"></i>
</button>
<button id="exit-button" class="window-button btn">
<i class="fas fa-fw fa-times" style="font-size: 0.9rem;"></i>
</button>
</div>
</div>
</div>
<div class="scrollbar">
<main class="main">
<div class="mng-row">
<div class="col-md-6 mng-col">
<div class="mng-inner" id="mng-replacement"></div>
</div>
<div class="col-md-6 mng-col bg-indigo">
<div class="mng-inner" id="newUpdate">
<a href="index.html">
<div class="icon">
<i class="fa fa-fw fa-wifi"></i>
</div>
<h1 class="logo display-4">
<strong></strong>
</h1>
</a>
</div>
</div>
</main>
</div>
<div class="modal fade" id="modal-updates" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title pull-left">Changelog</h5>
</div>
<div class="modal-body">
See changes in our most recent versions of the application.
<hr>
<ul id="updateLog" class="list list--check">
</ul>
</div>
<div class="modal-footer">
<button type="button" id="restart-button" class="btn btn-link">Restart</button>
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Vendors -->
<script src="assets/vendors/bower_components/jquery/dist/jquery.min.js"></script>
<script src="assets/vendors/bower_components/popper.js/dist/umd/popper.min.js"></script>
<script src="assets/vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/vendors/bower_components/jquery.scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/vendors/bower_components/jquery-scrollLock/jquery-scrollLock.min.js"></script>
<script src="assets/vendors/bower_components/select2/dist/js/select2.full.js"></script>
<script src="assets/vendors/bower_components/remarkable-bootstrap-notify/dist/bootstrap-notify.min.js"></script>
<!-- App functions and actions -->
<script src="assets/js/custom.js"></script>
<script src="assets/js/app.min.js"></script>
</body>
</html>
Спасибо всем, кто помогает, я действительно ценю это!