Electron - 使用 showOpenDialog 时抛出不允许加载本地资源 [英] Electron - throws Not allowed to load local resource when using showOpenDialog
问题描述
我只是想使用 showOpenDialog
并加载图像.但是当我选择一个图像应用程序会崩溃.
I just wanted to use showOpenDialog
and load an image. But when I select an image app will crash.
main.js:
...
ipcMain.on('open-file-dialog', function (event) {
const window = BrowserWindow.getFocusedWindow();
dialog.showOpenDialog(window, {
properties: ['openFile']
}, p => {
console.log(p)
});
})
renderer.js:
renderer.js:
document.querySelector('#select-image').addEventListener('click', function (event) {
ipcRenderer.send('open-file-dialog')
});
当我选择任何内容时,控制台中会显示此错误:不允许加载本地资源:file:///start
Electron 版本是 8.2.5
When I select anything this error shows in console :
Not allowed to load local resource: file:///start
and the Electron version is 8.2.5
编辑 1:
此警告(或可能是错误)显示在终端 objc[50899]: Class FIFinderSyncExtensionHost 在/System/Library/PrivateFrameworks/FinderKit.framework/Versions/A/FinderKit (0x7fff951e61d0) 和/System/Library/PrivateFrameworks/FileProvider.framework/OverrideBundles/FinderSyncCollaborationFileProviderOverride.bundle/Contents/MacOS/FinderSyncCollaborationFileProviderOverride (0x11298bdc8).将使用两者之一.哪一个是未定义的.
This warning (or may be error) is shown in the terminal objc[50899]: Class FIFinderSyncExtensionHost is implemented in both /System/Library/PrivateFrameworks/FinderKit.framework/Versions/A/FinderKit (0x7fff951e61d0) and /System/Library/PrivateFrameworks/FileProvider.framework/OverrideBundles/FinderSyncCollaborationFileProviderOverride.bundle/Contents/MacOS/FinderSyncCollaborationFileProviderOverride (0x11298bdc8). One of the two will be used. Which one is undefined.
编辑 2:我使用 Electron Fiddle 整理了示例 Gist:here
Edit 2: I put together sample Gist using Electron Fiddle : here
推荐答案
Electron 不允许带有 webSecurity: true
的窗口加载本地文件.
Electron doesn't allow windows with webSecurity: true
to load local files.
消除错误的一种方法是简单地将其设置为 false
.但这会使您的应用使用起来不太安全:
One way to get rid of the error is to simply set it to false
. But this will make your app less safe to use:
new BrowserWindow({
...
webPreferences: {
webSecurity: false
}
})
很好的解决方案
相反,您要做的是创建一个自定义协议,然后使用它来加载文件.
Good solution
Instead, what you have to do is to create a custom protocol and then use that for loading files.
import { protocol } from 'electron'
...
app.on('ready', async () => {
// Name the protocol whatever you want.
const protocolName = 'your-app-name'
protocol.registerFileProtocol(protocolName, (request, callback) => {
const url = request.url.replace(`${protocolName}://`, '')
try {
return callback(decodeURIComponent(url))
}
catch (error) {
// Handle the error as needed
console.error(error)
}
})
...
注意:我不确定协议名称是否必须是唯一的,我从未测试过它.如果您只是将协议命名为 safe-protocol
并且您的应用的用户有另一个注册了 safe-protocol
的应用 X,那么您的应用在打开时会抛出错误它或它将注册这两个应用程序,但是当用户尝试使用 app.setAsDefaultProtocolClient
函数从 URL 打开他们的应用程序时,这两个应用程序都会打开.不知道在这种情况下会发生什么.
Note: I'm not sure if the protocol name has to be unique, I never tested it. If you just name the protocol as safe-protocol
and the user of your app has another app X with registered safe-protocol
, your app will either throw an error when they open it or it will register both apps but when the user tries to open their app from a URL, using app.setAsDefaultProtocolClient
function, both of those apps will open. Not sure what happens in this case.
ipcMain.on('open-file-dialog', function (event) {
const window = BrowserWindow.getFocusedWindow();
dialog.showOpenDialog(window, { properties: ['openFile'] })
.then(result => {
// Send the path back to the renderer
event.sender.send('open-file-dialog-reply', { path: result.filePaths[0] })
})
.catch(error => {
console.log('Could not get file path')
})
})
渲染进程:
<img id="image-1">
ipcRenderer.on('open-file-dialog-reply', (event, data) => {
const path = data.path
loadImage(path)
}
function loadImage (path) {
const image1 = document.getElementById('image-1')
image1.src = `safe-file-protocol://${path}`
}
方法二:直接在渲染器中加载路径:
渲染进程:
<img id="image-1" data-path="C:/test.jpg">
function loadImage () {
const image1 = document.getElementById('image-1')
const path = image1.dataset.path
image1.src = `safe-file-protocol://${path}`
}
loadImage()
这篇关于Electron - 使用 showOpenDialog 时抛出不允许加载本地资源的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!