Question

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

该应用应该允许多个网址（例如https://messenger.com/和https://gmail.com/）可见并且具有标签式界面。

我已经尝试过生成Webview和BrowserWindow。

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

我之前也尝试过使用iFrames，这是不行的。

关于完成允许使用cookies / 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)

}

Answer 1

如果你想拥有一个窗口，

<webview>显然就是这样。它也比<iframe>好很多，因为它与您的应用程序安全隔离，并在单独的进程中运行。

请参阅文档：https://electron.atom.io/docs/api/webview-tag/

如果messenger.com没有正确加载，这应该是您应该解决的问题（例如检查控制台消息，网络日志）。按照你的直觉，你的第一选择是正确的，现在就是让它发挥作用。

具有连接到https站点的多个选项卡式浏览器窗口的电子应用程序

1 个答案: