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

超、凢脫俗 2022-06-03 04:20 806阅读 0赞

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');
    });