Электрон - Webview
Тег webview используется для встраивания «гостевого» контента, такого как веб-страницы, в ваше приложение Electron. Этот контент содержится в контейнере веб-просмотра. Встроенная страница в вашем приложении определяет, как этот контент будет отображаться.
Веб-просмотр выполняется в отдельном процессе, чем ваше приложение. Чтобы обеспечить защиту от вредоносного содержимого, веб-просмотр не имеет тех же разрешений, что и ваша веб-страница. Это защищает ваше приложение от встроенного контента. Все взаимодействия между вашим приложением и встроенной страницей будут асинхронными.
Давайте рассмотрим пример, чтобы понять встраивание внешней веб-страницы в наше приложение Electron. Мы встроим веб-сайт tutorialspoint в наше приложение с правой стороны. Создать новыйmain.js файл со следующим содержанием -
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)Теперь, когда мы настроили наш основной процесс, давайте создадим HTML-файл, в который будет встроен веб-сайт tutorialspoint. Создайте файл с именем index.html со следующим содержимым -
<!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>Запустите приложение, используя следующую команду -
$ electron ./main.jsПриведенная выше команда сгенерирует следующий вывод -
Тег webview можно использовать и для других ресурсов. У элемента webview есть список генерируемых им событий, перечисленных в официальной документации. Вы можете использовать эти события для улучшения функциональности в зависимости от того, что происходит в веб-просмотре.
Всякий раз, когда вы встраиваете сценарии или другие ресурсы из Интернета, рекомендуется использовать webview. Это рекомендуется, поскольку это дает большие преимущества в плане безопасности и не мешает нормальному поведению.