複数のタブ付きブラウザウィンドウをhttpsサイトに接続している電子アプリ

Electronを使用してhttp://meetfranz.com/の独自のバージョンを作成しようとしています。複数のタブ付きブラウザウィンドウをhttpsサイトに接続している電子アプリ

アプリでは、https://messenger.com/とhttps://gmail.com/などの複数のURLが表示され、タブ付きのインターフェースを持つことが許可されているはずです。

WebviewとBrowserWindowの両方を生成しようとしました。

WebViewが

私は無だったのiFrameで早くも試着...

BrowserWindowは、メインウィンドウの飛び出し（ログインをロードしない）完全Messengerをロードするように見えることはできません行く。

クッキー/ 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

<webview> CLEあなたが単一のウィンドウを持っているかどうかを判断する方法です。よりもはるかに優れています。これはアプリから安全に分離されており、別のプロセスで実行されるためです。

は、ドキュメントを参照してください：https://electron.atom.io/docs/api/webview-tag/

messenger.comが正しくロードされない場合、これは（例えば、コンソールメッセージ、ネットワークログを検査）あなたが取り組むべきである問題でなければなりません。あなたの本能に従ってください。最初の選択は正しいものでした。今はそれを機能させることです。

出典

2017-09-12 10:36:08 ehmprah

ありがとう、私はそれを働かせています。私はしばらくの間、私の頭を叩いて、生成されたwebviewに追加したタグのいくつかを取り除くことによっても、Messengerがそれ自体を見せることに決めました。 –

複数のタブ付きブラウザウィンドウをhttpsサイトに接続している電子アプリ

答えて

関連する問題