You can use the WebView tag to embed the guest or external content into the web page. This acts same as an iframe. However, unlike the iframe, this runs in a separate process. The WebView tag provides the same API that the webContents class provides. So, you can manage the WebView content using the same method that the webContents API provides. Here is a simple web browser example that uses the WebView tag. This creates a simple custom web browser using the WebView tag. Here is what the page HTML looks like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fontawesome.css" />
<script src="app.js"></script>
</head>
<body>
<div id="controls">
<button id="btnBack" disabled="true">
<i class="fa fa-arrow-left"></i>
</button>
<button id="btnForward" disabled="true">
<i class="fa fa-arrow-right"></i>
</button>
<button id="btnHome">
<i class="fa fa-home"></i>
</button>
<button id="btnReload">
<i class="fa fa-refresh"></i>
</button>
<form id="frmLocation">
<div>
<input id="location" type="text" value="http://www.github.com/">
</div>
<input type="submit" value="Go">
</form>
</div>
<webview src="http://www.google.com/" style="flex: 1"></webview>
</body>
</html>
This is a simple HTML with an address bar, created using HTML, and the rest of the screen is filled with a web view. This will load google.com when the window loads. Let's add some functionalities to the button:
window.onload = function () {
let webview = document.querySelector('webview');
// Go to previous page on back button press
document.querySelector('#btnBack').onclick = function () {
webview.goBack();
};
//Go forward on button press
document.querySelector('#btnForward').onclick = function () {
webview.goForward();
};
// navigate to home
document.querySelector('#btnHome').onclick = function () {
webview.src = 'http://www.google.com';
};
//reload the page
document.querySelector('#btnReload').onclick = function () {
webview.reload();
};
document.querySelector('#frmLocation').onsubmit = function (e) {
e.preventDefault();
webview.src = document.querySelector('#location').value;
};
}
All of these methods come from the webContents class. You can also watch various events on WebView tag. A page loading cycle can listen as follows:
webview.addEventListener('did-start-loading', () => {
document.body.classList.add('loading');
isLoading = true;
document.querySelector('#location').value = event.url;
});
webview.addEventListener('did-stop-loading', () => {
isLoading = false;
});
webview.addEventListener('did-fail-load', () => {
console.log('Request failed');
});
webview.addEventListener('did-finish-load', () => {
document.body.classList.remove('loading');
});
These are the same event hooks that we discussed in the webContents API section. As WebView runs in a different process, the communication is always asynchronous. Then, you should use IPC messaging to communicate to and from the WebView.