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

我想用Electron创建我自己的http://meetfranz.com/版本。电子应用程序与多个选项卡式浏览器窗口连接到https网站

该应用应允许多个网址，例如https://messenger.com/和https://gmail.com/可见并且具有选项卡式界面。

我试过生成Webview和BrowserWindow。

的WebView似乎无法完全加载使者（不加载登录）
BrowserWindow弹出主窗口...

我在前面也试过这是无糖的iFrame走。

任何想法的最佳方式来实现允许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) 

}

来源

2017-09-12 Jonas Johansson