我有這 4 個專案檔案：
main.js
preload.js
renderer.js
index.html
節點：17.4.0 電子：18.2.0
我試圖在我的檔案系統上打開一個文本檔案，由renderer.js中的點擊事件觸發- 然后將文本檔案的內容加載到<div>index.html 中的標簽中。
main.js
const {app, BrowserWindow, ipcMain} = require("electron");
const path = require("path");
const fs = require("fs");
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true,
nodeIntegration: false
}
});
mainWindow.loadFile(path.join(__dirname, "index.html"));
// Open the DevTools.
mainWindow.webContents.openDevTools();
};
app.on("ready", () => {
createWindow();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
function openFile(){
fs.readFile("logs.txt", "utf8", (err, data) => {
if (err) {
console.error(err);
return "Error Loading Log File";
}
console.log(data);
return data;
});
}
ipcMain.handle("channel-load-file", openFile);
preload.js
const {contextBridge, ipcRenderer} = require("electron");
contextBridge.exposeInMainWorld("electronAPI", {
loadFile: () => ipcRenderer.invoke("channel-load-file")
});
渲染器.js
const btn = document.querySelector("#btn");
btn.addEventListener("click", e => {
let data = window.electronAPI.loadFile();
document.getElementById("main-content").innerText = data;
});
console.log(data);在main.js里面我絕對可以看到Log檔案的內容
但是，<div id="main-content"></div>填充了undefined。
我相信我錯過了其中的一些關鍵步驟：preload.js或renderer.js
有人看到事件鏈在哪里迷路了嗎？
（我非常愿意對我的流程進行任何改進）
uj5u.com熱心網友回復：
在下面的代碼中插入console.log()'s 表示handle內容在openFile有機會回傳結果之前執行。
main.js（主要流程）
function openFile() {
fs.readFile("logs.txt", "utf-8", (err, data) => {
if (err) {
console.error(err);
return "Error Loading Log File";
}
console.log('openFile: ' data); // Testing
return data;
});
}
ipcMain.handle('channel-load-file', () => {
let result = openFile();
console.log('handle: ' result); // Testing
return result;
})
結果console.log()是...
handle: undefined
openFile: File content...
為了解決這個問題，讓我們fs.readFile從回呼改為 Promise，這樣我們就可以await在handle.
由于handle正在處理一個承諾，讓我們使用語法糖async并await更容易實作。
main.js（主要流程）
function openFile() {
return new Promise((resolve, reject) => {
fs.readFile("logs.txt", "utf-8", (error, data) => {
if (error) {
console.log('reject: ' error); // Testing
reject(error);
} else {
console.log('resolve: ' data); // Testing
resolve(data)
}
});
});
}
ipcMain.handle('channel-load-file', async (event, message) => {
return await openFile()
.then((data) => {
console.log('handle: ' data); // Testing
return data;
})
.catch((error) => {
console.log('handle error: ' error); // Testing
return 'Error Loading Log File';
})
});
最后，讓我們修改我們data在index.html檔案中檢索的方式。
PS：讓我們也添加.toString()到回傳data（只是為了確定）。
index.html（渲染程序）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Electron Test</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
</head>
<body>
<div id="main-content"></div>
<input type="button" id="button" value="Load File">
</body>
<script>
document.getElementById('button').addEventListener('click', () => {
window.electronAPI.loadFile()
.then((data) => {
console.log(data); // Testing
document.getElementById("main-content").innerText = data.toString();
});
})
</script>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/471158.html
標籤：javascript 节点.js 安全 电子 工业电脑
上一篇：有沒有辦法在不發送明文電子郵件的情況下使用haveibeenpwned(HIBP)？
下一篇：如何通過元標記更改內容安全策略？