Electrón - Webview

La etiqueta webview se utiliza para incrustar el contenido de 'invitado', como páginas web, en su aplicación Electron. Este contenido está incluido en el contenedor de vistas web. Una página incorporada dentro de su aplicación controla cómo se mostrará este contenido.

La vista web se ejecuta en un proceso diferente al de su aplicación. Para garantizar la seguridad contra contenido malicioso, la vista web no tiene los mismos permisos que su página web. Esto mantiene su aplicación a salvo del contenido incrustado. Todas las interacciones entre su aplicación y la página insertada serán asincrónicas.

Consideremos un ejemplo para comprender la incrustación de una página web externa en nuestra aplicación Electron. Integraremos el sitio web tutorialspoint en nuestra aplicación en el lado derecho. Crear un nuevomain.js archivo con el siguiente contenido -

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

let win

function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format ({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
   }))
}

app.on('ready', createWindow)

Ahora que hemos configurado nuestro proceso principal, creemos el archivo HTML que incrustará el sitio web de tutorialspoint. Cree un archivo llamado index.html con el siguiente contenido:

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Menus</title>
   </head>
   
   <body>
      <div>
         <div>
            <h2>We have the website embedded below!</h2>
         </div>
         <webview id = "foo" src = "https://www.tutorialspoint.com/" style = 
            "width:400px; height:480px;">
            <div class = "indicator"></div>
         </webview>
      </div>
      
      <script type = "text/javascript">
         // Event handlers for loading events.
         // Use these to handle loading screens, transitions, etc
         onload = () => {
            const webview = document.getElementById('foo')
            const indicator = document.querySelector('.indicator')

            const loadstart = () => {
               indicator.innerText = 'loading...'
            }

            const loadstop = () => {
               indicator.innerText = ''
            }

            webview.addEventListener('did-start-loading', loadstart)
            webview.addEventListener('did-stop-loading', loadstop)
         }
      </script>
   </body>
</html>

Ejecute la aplicación usando el siguiente comando:

$ electron ./main.js

El comando anterior generará la siguiente salida:

La etiqueta webview también se puede utilizar para otros recursos. El elemento webview tiene una lista de eventos que emite enumerados en los documentos oficiales. Puede utilizar estos eventos para mejorar la funcionalidad en función de las cosas que suceden en la vista web.

Siempre que incorpore scripts u otros recursos de Internet, es recomendable utilizar webview. Esto se recomienda ya que ofrece grandes beneficios de seguridad y no obstaculiza el comportamiento normal.