Electron - Webview
A tag webview é usada para incorporar o conteúdo 'convidado', como páginas da web, em seu aplicativo Electron. Este conteúdo está contido no contêiner webview. Uma página incorporada em seu aplicativo controla como esse conteúdo será exibido.
O webview é executado em um processo separado do seu aplicativo. Para garantir a segurança de conteúdo malicioso, o webview não tem as mesmas permissões que sua página web. Isso mantém seu aplicativo protegido contra o conteúdo incorporado. Todas as interações entre seu aplicativo e a página incorporada serão assíncronas.
Vamos considerar um exemplo para entender a incorporação de uma página da web externa em nosso aplicativo Electron. Vamos incorporar o site tutorialspoint em nosso aplicativo no lado direito. Crie um novomain.js arquivo com o seguinte conteúdo -
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)
Agora que configuramos nosso processo principal, vamos criar o arquivo HTML que irá incorporar o site tutorialspoint. Crie um arquivo chamado index.html com o seguinte conteúdo -
<!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>
Execute o aplicativo usando o seguinte comando -
$ electron ./main.js
O comando acima irá gerar a seguinte saída -
A tag webview também pode ser usada para outros recursos. O elemento webview tem uma lista de eventos que ele emite listados nos documentos oficiais. Você pode usar esses eventos para melhorar a funcionalidade dependendo das coisas que acontecem na visualização da web.
Sempre que você estiver incorporando scripts ou outros recursos da Internet, é aconselhável usar o webview. Isso é recomendado porque tem grandes benefícios de segurança e não impede o comportamento normal.