javascript - Ứng dụng Electron với nhiều cửa sổ trình duyệt có tab kết nối đến các trang https

Tôi đang cố gắng tạo phiên bản riêng của mình của http://meetfranz.com/ bằng Electron.

Ứng dụng nên cho phép mở nhiều URL như https://messenger.com/ và https://gmail.com/ để có thể hiển thị và có giao diện theo tab.

Tôi đã thử cả việc tạo Webview và BrowserWindow.

• WebView dường như không thể tải Messenger hoàn toàn (không tải được trang đăng nhập)
• Cửa sổ trình duyệt bật ra khỏi cửa sổ chính…

Tôi đã thử trước đó với iFrames nhưng cũng không được.

Có ai có ý tưởng về cách tốt nhất để tạo giao diện trình duyệt tối giản có tab, cho phép cookie/https không?

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)

}

Câu trả lời #1

<webview> rõ ràng là cách nếu bạn muốn có một cửa sổ duy nhất. Nó cũng tốt hơn nhiều so với <iframe>, vì nó được cô lập an toàn khỏi ứng dụng của bạn và chạy trong một tiến trình riêng.

Xem tài liệu: https://electron.atom.io/docs/api/webview-tag/

Nếu messenger.com không tải đúng cách, đây nên là vấn đề bạn nên xử lý (ví dụ: kiểm tra thông báo trong console, nhật ký mạng). Hãy theo bản năng của bạn, lựa chọn đầu tiên của bạn là đúng, bây giờ là về việc làm cho nó hoạt động.