具有多个连接到 https 站点的选项卡式浏览器窗口的电子应用程序
Posted
技术标签:
【中文标题】具有多个连接到 https 站点的选项卡式浏览器窗口的电子应用程序【英文标题】：Electron app with multiple tabbed browser windows connecting to https sites 【发布时间】：2018-02-20 16:26:50 【问题描述】：我正在尝试使用 Electron 创建我自己的 http://meetfranz.com/ 版本。
该应用应允许多个 URL（例如 https://messenger.com/ 和 https://gmail.com/）可见并具有选项卡式界面。
我已经尝试生成 Webview 和 BrowserWindow。
WebView 似乎无法完全加载 Messenger（不加载登录） BrowserWindow 弹出主窗口...我之前也尝试过 iFrames，但这是不行的。
关于实现允许 cookie/https 的选项卡式最小浏览器界面的最佳方法有什么想法吗？
index.html
<html>
<head>
<style>
webview
display: inline-flex;
width: 800px;
height: 600px;
</style>
</head>
<body>
<form name="form">
<input name="input" placeholder="https://messenger.com/" value="https://messenger.com">
<button type="submit">submit</button>
</form>
<div class="tabs">
</div>
<div class="webviews">
</div>
<!--<webview src="https://messenger.com/" autosize="on" nodeintegration="on" disablewebsecurity="on" webpreferences="allowRunningInsecureContent"></webview>-->
<script type="text/javascript">
require('./app.js')
</script>
</body>
</html>
main.js
const app, BrowserWindow, BrowserView = require('electron')
app.on('ready', createWindow)
function createWindow()
let win = new BrowserWindow(
width: 1000,
height: 600,
height: 600,
"node-integration": "iframe", // and this line
"web-preferences":
"web-security": false,
"nodeIntegration": false,
)
win.on('closed', () =>
win = null
)
win.webContents.openDevTools()
// Load a remote URL
//win.loadURL('https://github.com')
// Or load a local HTML file
win.loadURL(`file://$__dirname/index.html`)
/*win.webContents.session.webRequest.onHeadersReceived(, (d, c) =>
if(d.responseHeaders['x-frame-options'] || d.responseHeaders['X-Frame-Options'])
delete d.responseHeaders['x-frame-options']
delete d.responseHeaders['X-Frame-Options']
c(cancel: false, responseHeaders: d.responseHeaders)
)*/
//app.commandLine.appendSwitch('disable-web-security')
app.js
const app, BrowserWindow, BrowserView = require('electron').remote
let tabs = document.querySelector(".tabs")
let webviews = document.querySelector(".webviews")
document.getElementsByTagName("form")[0].onsubmit = function(event)
//createWebview(form.input.value)
createBrowserWindow(form.input.value)
return false;
function createWebview(url)
let webview = new WebView()
webview.setAttribute("autosize","on")
webview.setAttribute("nodeintegration","on")
webview.setAttribute("disablewebsecurity","on")
webview.setAttribute("webpreferences","allowRunningInsecureContent")
webview.src = url
webviews.appendChild(webview)
let tab = document.createElement("div")
tab.textContent = url
tab.target = webview
tabs.appendChild(tab)
function createBrowserWindow(url)
let win = new BrowserWindow(
width: 800,
height: 600,
y: 100,
x: 100,
webPreferences:
webSecurity: false,
nodeIntegration: false
)
win.setMenu(null)
win.on('closed', () =>
win = null
)
view = new BrowserView(
webPreferences:
nodeIntegration: false
)
win.webContents.openDevTools()
// Load a remote URL
win.loadURL(url)
【问题讨论】：
【参考方案1】：<webview> 显然是您想要一个窗口的方法。它也比<iframe> 好很多，因为它与您的应用安全隔离并在单独的进程中运行。
查看文档：https://electron.atom.io/docs/api/webview-tag/
如果 messenger.com 无法正确加载，这应该是您应该解决的问题（例如检查控制台消息、网络日志）。跟随你的直觉，你的第一选择是正确的，现在是让它发挥作用。
【讨论】：
谢谢，我已经成功了。我用头撞了一会儿，通过删除我在生成的 webview 上添加的一些标签，甚至 Messenger 决定展示自己。 我正在使用webview 做类似的事情，但它最终使不同视图之间的通信变得复杂。很高兴听到不同的解决方案以上是关于具有多个连接到 https 站点的选项卡式浏览器窗口的电子应用程序的主要内容，如果未能解决你的问题，请参考以下文章