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

HTML页面如下,使用electron中的webView来进行网页的浏览,然后在总体的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');
});

你可能感兴趣的:(electron)