通过electron的webView使用按钮控制前进后退

最新推荐文章于 2025-03-11 10:30:07 发布

小土豆子额

最新推荐文章于 2025-03-11 10:30:07 发布

阅读量6.6k

点赞数 1

分类专栏： electron

本文链接：https://blog.csdn.net/chenyidong521/article/details/78833517

版权

electron 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Electron应用中利用webView组件，结合HTML和JavaScript实现前进和后退功能。通过在主HTML文件中添加前进、后退按钮，并在main.js文件中进行相应操作，用户可以自由浏览历史记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML页面如下,使用electron中的webView来进行网页的浏览，然后在总体的html文件中添加两个按钮，前进和后退，布局的话看自己喜欢的位置。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="generator" content="GWrite (WYSIWYG editor)">
  <title></title>
  <style>
  webview {
    display:inline-flex;
    min-width:1350px;
    min-height:660px;
  }
  webview.hide {
    visibility: hidden;
  }
  </style>
</head>
<body>
  <div style="width:100%;display:flex;flex-direction:row">
        <button id="houtui" style="width:50%; backgrund-color:red;border:none" onclick="goBackWebView()" >后退</button>
        <button id="qianjin" style="width:50%; backgrund-color: red;border:none" onclick="goForwardWebView()" >前进</button>
    </div>
  <div>
    <webview   src="http://www.cityfoodmap.com:9091"    autosize="on"   minwidth="1350"    minheight="660"  ></webview>
  </div>
</body>
<script>
 var webview =
  onload = () => {
       webview = document.querySelector('webview')

   }
   function goBackWebView(){
     webview.goBack()
   }
   function goForwardWebView(){
     webview.goForward()
   }
</script>
</html>

main.js文件

var electron = require('electron');

// 用来控制应用的生命周期
var app = electron.app;

// 用来创建浏览器窗口
var BrowserWindow = electron.BrowserWindow;
// 创建一个全局变量，名字随便取，相当于普通网页中的 window 对象
var mainWindow;
// 当软件触发 ready 事件之后，创建浏览器窗口
app.on('ready', function() {
    // 创建浏览器窗口。
    mainWindow = new BrowserWindow({
        width:1366,
        height: 768,
        title:"哈尔滨智慧食安全监管平台"

    });


 //mainWindow.openDevTools()
    // 加载 example 目录下的index.html，就是刚才我们新建的那个
    mainWindow.loadURL('file://' + __dirname + '/start.html');
});