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

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

    <div >
        <div id="mySidebar" >
            <ul id="myTab" >
                <li >
                    <a href="#webview1"  data-toggle="tab" draggable="false">Tab1</a>
                </li>
                <li >
                    <a href="#webview2"  data-toggle="tab" draggable="false">Tab2</a>
                </li>
                <li >
                    <a href="#webview3"  data-toggle="tab" draggable="false">Tab3</a>
                </li>
            </ul>
        </div>
        <div >

            <div  id="webview1">
                <webview src="link1" style="width:100%; height:100%" disablewebsecurity allowpopups></webview>
            </div>
            <div  id="webview2">
                <webview src="link2" style="width:100%; height:100%" disablewebsecurity allowpopups></webview>
            </div>
            <div  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?

CodePudding user response：

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();
} });