两种常见方式
- 使用 BrowserWindow 直接打开远程地址(最简单)
- 在渲染进程里用 嵌入远程地址(需要开启 webviewTag)
方式 A:直接加载远程地址(推荐最简)
在 electron-app/src/main/index.ts 的创建窗口处,改为加载你的 URL:
typescript
mainWindow.loadURL('http://127.0.0.1:5006/milk-donation/Index/head/menu/donate/detail/info?tenant_id=100003')
代码位置参考:
index.ts
webPreferences: {
preload: join(__dirname, '../preload/index.js'),
sandbox: false
}
你可以临时用上面的 loadURL 替换当前 dev/prod 分支逻辑(或只在某个环境下生效)。
方式 B:使用 (需要开启 webviewTag)
- 在 BrowserWindow 开启 webviewTag:
typescript
webPreferences: {
preload: join(__dirname, '../preload/index.js'),
sandbox: false,
webviewTag: true
}
- 在渲染进程的页面(例如 renderer/index.html 或你的根组件)放置:
html
<webview
src="http://127.0.0.1:5006/milk-donation/Index/head/menu/donate/detail/info?tenant_id=100003"
style="width:100%; height:100%;"
allowpopups
注意事项
- 安全:加载远程内容时,建议保持 contextIsolation: true(如有需要在 preload 暴露受控 API),并限制可允许的域名。
- CSP:若你的 index.html 有严格 CSP,需要允许 http://127.0.0.1:5006。
- 外链处理:主进程里你已用 setWindowOpenHandler 拦截外链, 内部弹窗需 allowpopups 或在内里自行处理。
我建议:如果只是把远程系统直接展示,优先用方式 A;如果需要在你的页面 UI 框架内嵌多个外部页面或做更细粒度隔离,再选方式 B。
- 修改点:说明了如何在 BrowserWindow 中直接 loadURL,以及如何开启 webviewTag 并在渲染进程添加 标签(含你的具体 URL)。