如何在Electronjs中为网络视图添加前向后退和刷新按钮

Question

我正在使用Electron Js显示多个Web视图内容。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可以很好地在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();
} });