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

Posted 2023-03-22

【中文标题】如何在 Electronjs 中为 web 视图添加前进和刷新按钮？

【英文标题】：How to add forward back and refresh buttons for webviews in Electronjs?

【发布时间】：2021-12-19 13:10:36

【问题描述】：

我正在使用 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 中正确使用这些代码。

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

【问题讨论】：

什么是网页视图？你自己的组件？或 iframe 或 ?

嗨，它是一个 iframe，我正在使用它来获取我之前制作的网站的一部分。

【参考方案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();
 );