Zum Hauptteil springen

BrowserView

Eine Browseransicht kann verwendet werden, um zusätzliche Webinhalte in ein BrowserWindow einzubetten. Es ist wie ein untergeordnetes Fenster, mit der Ausnahme, dass es relativ zu dem übergeordneten Fenster positioniert ist. Es ist als Alternative zum Webview Tag gedacht.

Klasse: BrowserView​

Erstelle und kontrolliere Ansichten.

Prozess: Haupt

This module cannot be used until the ready event of the app module is emitted.

Beispiel​

// Im Hauptprozess.
const { app, BrowserView, BrowserWindow } = require('electron')

app.whenReady().then(() => {
  const win = new BrowserWindow({ width: 800, height: 600 })

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

new BrowserView([options]) Experimental​

  • options Object (optional)

Instanz Eigenschaften​

Objekte, die mit new BrowserView erstellt wurden, haben folgende Eigenschaften:

view.webContents Experimental​

A WebContents object owned by this view.

Beispiel Methoden​

Objekte, die mit new BrowserView erstellt wurden, haben folgende Instanzmethoden:

view.setAutoResize(options) Experimental​

  • options Objekt
    • width boolean (optional) - Wenn true, wächst und schrumpft die Breite der Ansicht zusammen mit dem übergeordneten Fenster. Automatisch false.
    • height boolean (optional) - Wenn true, wächst und schrumpft die Höhe der Ansicht zusammen mit dem übergeordneten Fenster. Automatisch false.
    • horizontal boolean (optional) - Wenn true, ändert sich sowohl die X-Position als auch die Breite der Ansicht zusammen mit dem übergeordneten Fenster. Automatisch false.
    • vertical boolean (optional) - Wenn true, ändert sich sowohl die Y-Position als auch die Höhe der Ansicht zusammen mit dem übergeordneten Fenster. Automatisch false.

view.setBounds(bounds) Experimental​

  • bounds Rectangle Die Grenzen der Ansicht als Rechteck

Passt die Ansicht an die Dimensionen und die Ausrichtung des Rechteckes relativ zum übergeordneten Fenster an.

view.getBounds() Experimental​

Returns Rectangle

Die bounds dieser BrowserView-Instanz als Object.

view.setBackgroundColor(color) Experimental​

  • color string - Color in Hex, RGB, ARGB, HSL, HSLA or named CSS color format. The alpha channel is optional for the hex type.

Examples of valid color values:

  • Hex
    • #fff (RGB)
    • #ffff (ARGB)
    • #ffffff (RRGGBB)
    • #ffffffff (AARRGGBB)
  • RGB
    • rgb(([\d]+),\s([\d]+),\s([\d]+))
      • e.g. rgb(255, 255, 255)
  • RGBA
    • rgba(([\d]+),\s([\d]+),\s([\d]+),\s*([\d.]+))
      • e.g. rgba(255, 255, 255, 1.0)
  • HSL
    • hsl((-?[\d.]+),\s([\d.]+)%,\s([\d.]+)%)
      • e.g. hsl(200, 20%, 50%)
  • HSLA
    • hsla((-?[\d.]+),\s([\d.]+)%,\s([\d.]+)%,\s*([\d.]+))
      • e.g. hsla(200, 20%, 50%, 0.5)
  • Color name
    • Options are listed in SkParseColor.cpp
    • Similar to CSS Color Module Level 3 keywords, but case-sensitive.
      • e.g. blueviolet or red

Note: Hex format with alpha takes AARRGGBB or ARGB, not RRGGBBA or RGA.