Using WebView tag in Electron.js

For more information visit:

We can tell webview to open some web page, in our case, we want to render an existing web page grid.html stored in our project dir. In order to tell our webview what to show, we’ll need to define its source:

<webview src="./grid.html" autosize></webview>

When autosize attribute is enabled, the webview container size cannot be less than the minimum values (CSS min-height and min-width) or greater than the maximum (CSS max-heightand max-width). A webview tag can be styled just like a regular html tag, using the style or class attributes.

There are also a number of event listener for the webview tag. The did-start-loading is called when the web page begins to load, did-finish-load is called when the web page is loaded, did-fail-load is called when the web page fails to load and dom-ready is called when the web page completely loaded and parsed.

Inserting `webview` tag to index.html

We’ll create a webview tag and load the grid.html file by providing the src path:

//index.html
<webview src="./grid.html" style="flex:1 1 auto;"></webview>
<script>
 onload = () => {
  const webview = document.querySelector('webview');
  webview.addEventListener('dom-ready', () => {
   require('./renderer.js')
  });
 }
</script>

The onload event executes when index.html fully loaded and parsed.
The dom-read event executes when the webview completely loaded and parsed the grid.html file.
We then includes the renderer.js file

Creating grid.html file

In grid.html file, we will create an HTML table with three columns to display duplicate files. The first column will show a check box to select a file, the second column will show the size of the file and the third column will show the file name including the full path:

//grid.html
<table>
 <thead>
  <tr>
   <th id="col1">
    <input type="checkbox" id="checkBoxSelectAll">
   </th>
   <th id="col2">Size</th>
   <th id="col3">File</th>
  </tr>
 </thead>
</table>

The renderer.js file will send the duplicate files, their sizes and their hashes to grid.html in an array form. The grid.html will append the received data to the table dynamically.

In previous tutorials, we already learned how to insert table rows and cell dynamically:

Insert table rows and cells dynamically
Creating resizable table grid. (Follow this tutorial if you want a resizable table grid for grid.html).

Let’s create the complete grid.html file step by step. First we insert the style tag after opening the head tag to style HTML table:

<html>
 <head>
  <style>
table{width:100%;overflow:hidden}
table th{text-align:left}
tbody{background-color:#eee;cursor:pointer;border-bottom: 15px solid white}
tbody:nth-of-type(2n){background-color:#ccc}
th{position:relative;}
table{border-collapse:collapse}
thead{background:#000;color:#fff}
td,th{padding:5px 15px;border:1px solid #fff}
#col3{width:100%}
td:nth-child(3) {
 overflow-wrap: break-word;
 word-wrap: break-word;
 word-break: break-all;
 word-break: break-word;
}
  </style>
 </head>
<body>

Next, we insert the table and table heading tags:

<table>
 <thead>
  <tr>
   <th id="col1"><input type="checkbox" id="checkBoxSelectAll"></th>
   <th id="col2">Size</th>
   <th id="col3">File</th>
  </tr>
 </thead>
</table>

Next, we write JavaScript code which we created on https://www.brainbell.com/javascript/dynamic-table-rows.html to dynamically insert rows and cells:

<script>
var table = document.getElementsByTagName('table')[0],
tbodys = [];
function addRows(data) {
 if (!data) return;
 var tbody = tbodys[data.id];
 var size = data.size;

 if (tbody === undefined){
  tbody = table.createTBody();
  tbody.id = data.id;
  tbodys[data.id] = tbody;
 }

 data.files.forEach(file => {
  var tr = tbody.insertRow(),
  td1 = tr.insertCell(),
  td2 = tr.insertCell(),
  td3 = tr.insertCell(),
  cb = document.createElement('input');
  cb.type = 'checkbox';
 
  td1.appendChild(cb);
  cb.value = file;

  var sz = document.createTextNode(size);
  td2.appendChild(sz);

  var ph = document.createTextNode(file);
  td3.appendChild(ph);
 });
 var tableHeight = table.offsetHeight;
 return ((document.body.scrollHeight+50)+'px');
}
/*
Optionally, you can also add resizable grid code from 
https://www.brainbell.com/javascript/making-resizable-table-js.html
*/
</script>
</body>
</html>

In next tutorial, we’ll modify the renderer.js file to communicate with grid.html file. To download grid.html and index.html files, follow these links: grid.html and index.html.

Inserting webview tag to index.html

Creating grid.html file

Inserting `webview` tag to index.html