In the previous tutorial we discussed about Electron and the Electron Web Browser we are going to create. If you haven't read the previous tutorial, I recommend you to read it here.
Now we are having a browser template which can load a web page using Electron webview. In this tutorial we are going to add some navigation capabilities to this browser. At this level the buttons on the browser doesn't work. We are going to add some code to make them work.
Now in the "Starter" folder you can see a file called "electronbrowser.js". This is the file that will handle the functionalities of the browser. Open this file in your favorite text editor (mine is Adobe Brackets). You can see some initializing of variables there and some commented lines. Click below the comment "//Navigation Functions" and add this code. Those are inbuild navigation methods available for Electron webview.
Now click under the comment "//Event Listeners" and add the following code.
Now if you run the application using "electron ." you can see the back, forward, refresh and home buttons are working. But there's a problem. The address bar of the browser doesn't show up the URL of the current page. fix it with this code. Click under comment "//Show URL of the web page" and add this code.
Now go to the event listeners below and add this code
If you run the application now, you can see the address bar is showing the URL of the current web page. Not only that, we must be able to visit a URL that we type in the address bar. For that to happen click below comment "//Load URL from the textbox" and add the following code;
Then go to the event listeners below and add this code;
At last for this chapter of the tutorial, we are going to add the below codes to indicate that the web page is still loading;
Under comment "//Loading Status"
Under comment "//Event Listeners"
