javascript - Electron-app med flere nettleservinduer med faner som kobler til https-nettsteder

Jeg prøver å lage min egen versjon av http://meetfranz.com/ ved å bruke Electron.

Appen bør tillate flere URL-er, som https://messenger.com/ og https://gmail.com/, å være synlige og ha et fane-basert grensesnitt.

Jeg har prøvd både å generere Webview og BrowserWindow.

• WebView ser ikke ut til å kunne laste Messenger helt (laster ikke innlogging)
• BrowserWindow popper ut fra hovedvinduet…

Jeg prøvde tidligere også med iFrames, som var en umulighet.

Noen ideer om den beste måten å lage en fane-basert minimal nettlesergrensesnitt som tillater informasjonskapsler/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)

}

Svar #1

<webview> er tydeligvis veien å gå hvis du ønsker å ha et enkelt vindu. Det er også mye bedre enn et <iframe>, fordi det er sikkert isolert fra appen din og kjører i en separat prosess.

Se dokumentasjonen: https://electron.atom.io/docs/api/webview-tag/

Hvis messenger.com ikke laster riktig, bør dette være problemet du bør ta tak i (f.eks. inspiser konsollmeldinger, nettverkslogg). Følg instinktene dine, ditt første valg var det riktige, nå handler det om å få det til å fungere.