Electron - Webview
Il tag webview viene utilizzato per incorporare il contenuto "ospite" come le pagine web nella tua app Electron. Questo contenuto è contenuto nel contenitore webview. Una pagina incorporata nella tua app controlla la modalità di visualizzazione di questo contenuto.
La visualizzazione web viene eseguita in un processo separato rispetto alla tua app. Per garantire la sicurezza da contenuti dannosi, la visualizzazione Web non dispone delle stesse autorizzazioni della pagina Web. Ciò mantiene la tua app al sicuro dal contenuto incorporato. Tutte le interazioni tra la tua app e la pagina incorporata saranno asincrone.
Consideriamo un esempio per comprendere l'incorporamento di una pagina web esterna nella nostra app Electron. Incorporeremo il sito web tutorialspoint nella nostra app sul lato destro. Crea un nuovomain.js file con il seguente contenuto -
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)Ora che abbiamo impostato il nostro processo principale, creiamo il file HTML che incorporerà il sito Web tutorialspoint. Crea un file chiamato index.html con il seguente contenuto:
<!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>Esegui l'app utilizzando il seguente comando:
$ electron ./main.jsIl comando precedente genererà il seguente output:
Il tag webview può essere utilizzato anche per altre risorse. L'elemento webview ha un elenco di eventi che emette elencati nei documenti ufficiali. È possibile utilizzare questi eventi per migliorare la funzionalità a seconda delle cose che si verificano nella visualizzazione Web.
Ogni volta che si incorporano script o altre risorse da Internet, è consigliabile utilizzare webview. Questo è consigliato in quanto offre grandi vantaggi in termini di sicurezza e non ostacola il normale comportamento.