在 Electron 應用程序中將本地文件加載到 iframe

Question

我正在使用Electron構建一個應用程序，它可以讓您預覽存儲在本地機器上的 HTML5 橫幅廣告。

到目前為止，我已經可以選擇一個包含所有文件的目錄。

選擇后，iframe 的 src 將更新到該目錄。

ipcRenderer.on('selected-directory', (event, data) => {
   // update preview
   const previewer = document.getElementById('preview-section-iframe')
   previewer.src = data.filePaths + '\\html\\'
}

但是，橫幅未加載，html 如下所示：

<iframe id="preview-section-iframe" title="Banner preview" width="300" height="600" src="G:\BANNERS\300x600\html\">   
</iframe>

但是，當將鼠標懸停在開發工具中的 src 上時，src 顯示為：

file:///G:/_projects/_dev/_electron_apps/test/electron-quick-start/G:\\BANNERS\\300x600\\html\\

它似乎正在尋找源代碼的應用程序文件。 有沒有辦法阻止這種情況？

Answer 1

你的 iframe 需要一個文件路徑，你給他一個文件夾的引用。

嘗試更像這樣的<iframe id="preview-section-iframe" title="Banner preview" width="300" height="600" src="G:\\BANNERS\\300x600\\html\\yourfile.extention">
</iframe> <iframe id="preview-section-iframe" title="Banner preview" width="300" height="600" src="G:\\BANNERS\\300x600\\html\\yourfile.extention">
</iframe>