How to add forward back and refresh buttons for webviews in Electronjs?

Question

I am displaying multiple webview contents using Electron Js. part of index.html

    <div class="contentArea">
        <div id="mySidebar" class="leftMenu">
            <ul id="myTab" class="nav nav-tabs">
                <li class="nav-item">
                    <a href="#webview1" class="nav-link active" data-toggle="tab" draggable="false">Tab1</a>
                </li>
                <li class="nav-item">
                    <a href="#webview2" class="nav-link" data-toggle="tab" draggable="false">Tab2</a>
                </li>
                <li class="nav-item">
                    <a href="#webview3" class="nav-link" data-toggle="tab" draggable="false">Tab3</a>
                </li>
            </ul>
        </div>
        <div class="contentPages tab-content">

            <div class="tab-pane show active" id="webview1">
                <webview src="link1" style="width:100%; height:100%" disablewebsecurity allowpopups></webview>
            </div>
            <div class="tab-pane" id="webview2">
                <webview src="link2" style="width:100%; height:100%" disablewebsecurity allowpopups></webview>
            </div>
            <div class="tab-pane" id="webview3">
                <webview src="link3" style="width:100%; height:100%" disablewebsecurity allowpopups></webview>
            </div>

            <script>
                $(document).ready(function () {
                    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                        var activeTab = $(e.target).text(); // Get the name of active tab
                        var previousTab = $(e.relatedTarget).text(); // Get the name of previous tab
                        $(".active-tab span").html(activeTab);
                        $(".previous-tab span").html(previousTab);
                    });
                });
            </script>
        </div>
    </div>

I used bootstrap and jquery for design. Navigation between webviews works very nicely with jquery. I'm trying to do. Creating forward, backward and refresh buttons for each webview. It's like an internet browser.

I didn't manage to use the codes properly in ElectronJS.

Can anyone who knows about this please help?

Answer 1

It's Work.

$(document).on( 'click', '#back-button-id', function(){
if(webview-id.canGoToOffset(-1)){
    webview-id.goBack();
} });

$(document).on( 'click', '#next-button-id', function(){
if(webview-id.canGoToOffset(+1)){
    webview-id.goForward();
} });