Два браузера в одном окне Electron

ProgramBox

Два браузера в одном окне Electron

Post author:admin
Запись опубликована:21 мая, 2023
Post category:Вопросы по программированию

#javascript #google-chrome #browser #electron

#javascript #google-chrome #браузер #electron

Вопрос:

Я хотел бы иметь одно электронное окно, разделенное на две части:

левая часть — это BrowserWindow загрузка https://gmail.com
правая часть также BrowserWindow загружает Gmail, но я бы хотел, чтобы эти два браузера были «независимыми», т. Е. файлы cookie / localStorage / и т.д. Должны быть независимыми (например, если у нас есть обычное окно Chrome или окно инкогнито); таким образом, позволяя иметь одну учетную запись Gmail слева / другую учетную запись, подключенную в правой части
некоторые другие кнопки пользовательского интерфейса поверх единого окна Electron.

Этот код работает, но он создает 2 окна вместо одного:

 const { app, BrowserWindow } = require('electron')
const path = require('path')

app.once('ready', () => {
  let win = new BrowserWindow({show: false})
  win.once('show', () => { win.webContents.executeJavaScript('validateFlights()') })
  win.loadURL('https://www.gmail.com')
  win.show()

  let win2 = new BrowserWindow({show: false})
  win2.once('show', () => { win.webContents.executeJavaScript('validateFlights()') })
  win2.loadURL('https://www.gmail.com')
  win2.show()
})

Как разместить их в одном окне?

1. Почему бы не использовать одно окно браузера и два iframe (ов)?

2. @Kornflexx Я предполагаю, что gmail может использовать код, нарушающий фреймворк. Если вы можете найти способ обойти это (возможно, это возможно в electron), то это правильное решение.

3. Возможно, это невозможно, косвенно вы хотите запустить два приложения в одном коде. У каждого приложения есть свой собственный экземпляр

4. @Kornflexx на самом деле это сложнее, потому что я хочу, чтобы после перезапуска приложения левый браузер оставался подключенным к учетной записи / правый браузер оставался подключенным к другой учетной записи (каждый со своими файлами cookie).

5. Другой пример: вы хотите создать «браузер» с помощью Electron (мы выполнили полный цикл, это верно ;)), например github.com/wexond/wexond : нам нужно иметь возможность отображать верхние кнопки пользовательского интерфейса (для выбора вкладок) и фактическую область браузера в одном окне.

Ответ №1:

Немного поздно, но чтобы добавить два браузера в одном окне, вы должны использовать BrowserWindow.addBrowserView вместо BrowserWindow.setBrowserView . Вы получите следующее:

 const { BrowserView, BrowserWindow, app } = require('electron')
function twoViews () {
  const win = new BrowserWindow({ width: 800, height: 600 })

  const view = new BrowserView()
  win.addBrowserView(view)
  view.setBounds({ x: 0, y: 0, width: 400, height: 300 })
  view.webContents.loadURL('https://electronjs.org')

  const secondView = new BrowserView()
  win.addBrowserView(secondView)
  secondView.setBounds({ x: 400, y: 0, width: 400, height: 300 })
  secondView.webContents.loadURL('https://electronjs.org')
  app.on('window-all-closed', () => {
    win.removeBrowserView(secondView)
    win.removeBrowserView(view)
    app.quit()
  })
}

app.whenReady().then(twoViews)

Как только вы создаете два BrowserView объекта, вы просто добавляете их в окно. Вы также захотите удалить представления при удалении приложения. В противном случае может возникнуть ошибка сегментации.

Ответ №2:

То, что вы ищете, — это BrowserView

Из документов:

BrowserView Может использоваться для встраивания дополнительного веб-контента в BrowserWindow . Это похоже на дочернее окно, за исключением того, что оно расположено относительно своего окна-владельца. Он предназначен для того, чтобы быть альтернативой webview тегу.

Похоже, это то, что вы хотите, представления могут отображать отдельные HTML-страницы и размещать их относительно в одном окне браузера.

 // In the main process.
const { BrowserView, BrowserWindow } = require('electron')

let win = new BrowserWindow({ width: 800, height: 600 })
win.on('closed', () => {
  win = null
})

let view = new BrowserView({
  webPreferences: {
    nodeIntegration: false
  }
})
win.setBrowserView(view)
view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
view.webContents.loadURL('https://electronjs.org')