Electron - Webview
Webview etiketi, Electron uygulamanıza web sayfaları gibi 'misafir' içeriğini yerleştirmek için kullanılır. Bu içerik, web görünümü kapsayıcısı içinde yer alır. Uygulamanızın içine yerleştirilmiş bir sayfa, bu içeriğin nasıl görüntüleneceğini kontrol eder.
Web görünümü, uygulamanızdan ayrı bir süreçte çalışır. Kötü amaçlı içerikten güvenliği sağlamak için, web görünümü web sayfanızla aynı izinlere sahip değildir. Bu, uygulamanızı gömülü içerikten korur. Uygulamanız ile katıştırılmış sayfa arasındaki tüm etkileşimler eşzamansız olacaktır.
Electron uygulamamıza harici bir web sayfasının yerleştirilmesini anlamak için bir örnek ele alalım. Tutorialspoint web sitesini sağ taraftaki uygulamamıza yerleştireceğiz. Yeni bir tane oluşturmain.js aşağıdaki içeriğe sahip dosya -
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)Artık ana sürecimizi kurduğumuza göre, tutorialspoint web sitesini yerleştirecek HTML dosyasını oluşturalım. Aşağıdaki içeriğe sahip index.html adlı bir dosya oluşturun -
<!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>Aşağıdaki komutu kullanarak uygulamayı çalıştırın -
$ electron ./main.jsYukarıdaki komut aşağıdaki çıktıyı üretecektir -
Webview etiketi diğer kaynaklar için de kullanılabilir. Web görünümü öğesi, resmi belgelerde listelenmiş olarak yayınladığı olayların bir listesine sahiptir. Web görünümünde yer alan şeylere bağlı olarak işlevselliği geliştirmek için bu olayları kullanabilirsiniz.
İnternetten komut dosyaları veya diğer kaynakları gömdüğünüzde, web görünümünü kullanmanız önerilir. Bu, büyük güvenlik avantajları sağladığından ve normal davranışı engellemediğinden önerilir.