如何在 Electronjs 中为 webview 添加前进后退和刷新按钮？

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来设计。使用 jquery 可以很好地在 webview 之间导航。我正在努力做。为每个 webview 创建前进、后退和刷新按钮。它就像一个互联网浏览器。

我没能在 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();
} });

如何在 Electronjs 中为 webview 添加前进后退和刷新按钮？

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

button

webview

electron

refresh

back