Electron - Chế độ xem web
Thẻ webview được sử dụng để nhúng nội dung 'khách' như các trang web trong ứng dụng Electron của bạn. Nội dung này được chứa trong vùng chứa webview. Một trang được nhúng trong ứng dụng của bạn sẽ kiểm soát cách hiển thị nội dung này.
Chế độ xem web chạy trong một quy trình riêng biệt với ứng dụng của bạn. Để đảm bảo an ninh khỏi nội dung độc hại, chế độ xem web không có quyền giống như trang web của bạn. Điều này giúp ứng dụng của bạn an toàn trước nội dung được nhúng. Tất cả các tương tác giữa ứng dụng của bạn và trang được nhúng sẽ không đồng bộ.
Hãy để chúng tôi xem xét một ví dụ để hiểu việc nhúng trang web bên ngoài vào ứng dụng Electron của chúng tôi. Chúng tôi sẽ nhúng trang web hướng dẫn vào ứng dụng của chúng tôi ở phía bên phải. Tạo một cái mớimain.js tệp với nội dung sau:
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)Bây giờ chúng ta đã thiết lập quy trình chính của mình, hãy tạo tệp HTML để nhúng trang web hướng dẫn. Tạo một tệp có tên là index.html với nội dung sau:
<!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>Chạy ứng dụng bằng lệnh sau:
$ electron ./main.jsLệnh trên sẽ tạo ra kết quả sau:
Thẻ webview cũng có thể được sử dụng cho các tài nguyên khác. Phần tử webview có danh sách các sự kiện mà phần tử phát ra được liệt kê trên các tài liệu chính thức. Bạn có thể sử dụng các sự kiện này để cải thiện chức năng tùy thuộc vào những thứ diễn ra trong webview.
Bất cứ khi nào bạn nhúng tập lệnh hoặc các tài nguyên khác từ Internet, bạn nên sử dụng webview. Điều này được khuyến nghị vì nó đi kèm với các lợi ích bảo mật tuyệt vời và không cản trở hành vi bình thường.