电子应用程序与多个选项卡式浏览器窗口连接到https网站

我正尝试使用Electron创build我自己的http://meetfranz.com/版本。

该应用程序应允许多个URL,如https://messenger.com/和https://gmail.com/可见,并有一个选项卡式界面。

我已经尝试生成Webview和BrowserWindow。

  • WebView似乎无法完全加载Messenger(不加载login)
  • BrowserWindowpopup主窗口…

我之前也尝试过使用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) } 

如果你想拥有一个单独的窗口, <webview>显然是一种方法。 它也比<iframe>好很多,因为它与您的应用程序安全隔离,并在单独的进程中运行。

查看文档: https : //electron.atom.io/docs/api/webview-tag/

如果messenger.com加载不正确,这应该是您应该解决的问题(例如,检查控制台消息,networking日志)。 按照你的直觉,你的第一select是正确的,现在是关于它的工作。