通过electron的webView使用按钮控制前进后退_electron 前进后退_小土豆子额的博客

相关文章推荐

行走的楼房 · 在调用函数之前等待定义 - Vue.js· 7 月前 ·

鼻子大的毛衣 · Git使用相同的文件推送新分支，再次上载所有 ...· 11 月前 ·

悲伤的电影票 · pandas如何筛选出DataFrame列名 ...· 1 年前 ·

茫然的键盘 · openLayer设置禁止拖拽地图_open ...· 1 年前 ·

任性的数据线 · C++ ...· 1 年前 ·

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

<!DOCTYPE html>
  <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>
  <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>
    <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');
                    HTML页面如下,使用electron中的webView来进行网页的浏览，然后在总体的html文件中添加两个按钮，前进和后退，布局的话看自己喜欢的位置。<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="
在渲染器过程中导入。
 import moment from 'moment' ;
import PromiseQueue from 'electron-webview-schedule/lib/promise-queue' ;
import WebviewSchedule from 'electron-webview-schedule/lib/webview-schedule' ;
const webviewSchedule = new WebviewSchedule ( {
  container : document . body ,
  queue : new PromiseQueue ( 1 ) ,
				文章目录案例知识点说明：全局快捷键 和 菜单快捷键的区别？
const { app, BrowserWindow, globalShortcut } = require('electron')
const path = require('path')
var mainWindow = null // 声明要打开的主窗口
const { Menu } = require('electron')
app.on('ready', () => {
  // 设置窗口的高度和宽度
  mainWindo
				即使在移动端和云端大行其道而，桌面端日渐落末的现在，我的心中仍然为桌面应用留有一个特殊的位置。和Web应用比起来桌面应用的优点还是很多的：只要把它们放在开始菜单栏或者dock上，你就能随时打开它们；还可以通过alt-tab或者cmd-tab切换应用；和操作系统之间的交互更良好（快捷键，通知栏等）。使用JavaScript开发桌面应用意味着在打包（packageapplication）的时候你会需要根据操作系统的不同发出不同的命令。这一行为是将原生桌面应用兼容不同平台的概念抽象出来，方便维护应用。现在，我们可以借助Electron或者NW.js开发一个桌面应用。其实这两者提供的或多或少差不多的特
1. 在Electron的主进程中创建一个新的BrowserWindow。
2. 指定BrowserWindow的webPreferences.preload选项，将一个预装载的脚本文件的路径设置为它的值。
3. 在预装载的JavaScript文件中，通过require('electron')来获取Electron模块，并使用它的webContents属性操作渲染进程。
4. 在渲染进程的页面上，使用Webview标签创建一个WebView元素，并将其中一个属性的值设置为BrowserWindow.webContents.id，这个属性是为了将WebView与主进程中的BrowserWindow关联起来。设置WebView载入的HTML文档地址。
5. 通过在主进程中执行webContents.executeJavaScript()方法，将预装载的JavaScript文件中定义的函数注入到WebView中。
当所有这些步骤都完成之后，WebView就可以在Electron中使用了。