在Electron中,需要使用Webview标记,而不是iframe标记来加载本地文件。Webview标记允许您在Electron
应用
程序窗口内嵌入Web内容,包括本地文件。
以下是一个示例,演示如何使用Webview标记加载本地文件:
HT
ML
代码:
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Electron Webview</title>
</head>
<webview src="./path/to/local/file.html"></webview>
</body>
</html>
您需要将src
属性设置为您要加载的本地文件的路径。
请注意,您必须在main.js文件中启用nodeIntegration选项,并在您的Electron应用程序中打开同源策略,以便正确加载本地文件:
main.js代码:
const { app, BrowserWindow } = require('electron')
app.commandLine.appendSwitch('disable-features', 'same-site-by-default-cookies')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
win.loadFile('index.html')
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
请注意,app.commandLine.appendSwitch('disable-features','same-site-by-default-cookies')
的操作用于正确加载本地文件。
希望这可以帮助您加载Web内容并嵌入您的Electron应用程序!