如何导出电子应用程序以在浏览器中使用
如何导出电子应用程序以在浏览器中使用
提问于 2020-04-13 02:20:35
我想创建我的第一个电子应用程序。其目的是打开、更改和保存文件。在quick start的帮助下，我创建了一个可以工作的应用程序。
这是我的main.js
const { app, BrowserWindow, dialog } = require('electron')
const path = require('path')
function createWindow () {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadFile('index.html')
mainWindow.webContents.openDevTools()
}
app.whenReady().then(createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})这是我的index.html。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title!</title>
</head>
<body>
<div>
<textarea id="content-editor" style="width:100%;height:500px"></textarea>
<input type="button" id="save-changes" value="Save changes"/>
</div>
<script src="./renderer.js"></script>
</body>
</html>这是我的preload.js
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element)
element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
const remote = require('electron').remote;
const app = remote.app;
const fs = require('fs');
var dialog = remote.dialog;
var filetoupdate = './configuration/config.json'
readFile(filetoupdate);
document.getElementById('save-changes').addEventListener('click', function () {
console.log('save-file');
saveChanges(filetoupdate);
}, false);
function readFile(filepath) {
console.log('readFile ..');
fs.readFile(filepath, 'utf-8', function (err, data) {
if (err) {
alert("An error ocurred reading the file :" + err.message);
return;
}
document.getElementById("content-editor").value = data;
});
}
function saveChanges(filepath, content) {
var content = document.getElementById("content-editor").value;
console.log('ssavechanged ..');
console.log(filepath);
console.log(content);
fs.writeFile(filepath, content, function (err) {
if (err) {
alert("An error ocurred updating the file" + err.message);
console.log(err);
return;
}
alert("The file has been succesfully saved");
});
}})我的render.js是空的。
如果我运行npm start，一切都正常。我想要编辑的文件(当前是硬编码的)已加载，我可以更改它。但是当我在浏览器中打开index.html时，我的文件没有加载。我看不到错误。
我做错了什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-13 06:08:19
两件事：
1)在Google Chrome或其他浏览器中打开index.html不会加载应用程序的其余部分。preload.js脚本由Electron运行。要向HTML的DOM中添加事件侦听器等内容，您需要像常规的前端开发一样将preload.js的内容作为脚本加载(例如，使用<script/>标记。
2)即使你使用上面的解决方案，应用程序仍然不能在浏览器中运行。您正在使用fs NodeJS应用程序接口，该应用程序接口在任何浏览器环境中都不可用。(一般来说，给予网站任意的磁盘访问权限是一个很大的安全风险。)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61176151
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号