如何在 Electronjs 中为 web 视图添加前进和刷新按钮？

Question

我正在使用 Electron Js 显示多个 webview 内容。 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>

我使用 bootstrap 和 jquery 进行设计。 webviews 之间的导航与 jquery 配合得非常好。 我正在尝试做。为每个 web 视图创建前进、后退和刷新按钮。 它就像一个互联网浏览器。

我没有设法在 ElectronJS 中正确使用这些代码。

有知道这方面的人可以帮忙吗？

Answer 1

这是工作。

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