在 Electron 应用程序中将本地文件加载到 iframe 中答案

【问题标题】：Load local files into iframe in Electron app在 Electron 应用程序中将本地文件加载到 iframe 中
【发布时间】：2022-05-03 01:38:53
【问题描述】：

我正在使用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\

它似乎在寻找源代码的应用程序文件。有没有办法阻止这种情况？

【问题讨论】：

标签： javascript html node.js electron

【解决方案1】：

你的 iframe 需要一个文件路径，你给他一个文件夹的引用。

尝试更多类似的东西 <iframe id="preview-section-iframe" title="Banner preview" width="300" height="600" src="G:\BANNERS\300x600\html\yourfile.extention"> </iframe>

【讨论】：

非常感谢，准！