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

最新推荐文章于 2024-08-21 11:04:21 发布

小土豆子额

最新推荐文章于 2024-08-21 11:04:21 发布

阅读量6.3k

点赞数 1

分类专栏： electron

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

版权

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

摘要由CSDN通过智能技术生成

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>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小土豆子额

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

[Electron]浏览器窗口构造选项对象

qq_29069649的博客

03-02

808

Electron浏览器窗口构造选项对象

electron webview 点击网页链接，将内容重新显示到webview

帅呆了我的高

05-11

1万+

首先将webview设置可以打开新窗口 allowpopups属性 <webview id="foo" src="https://www.baidu.com" allowpopups></webview> 添加新窗口监听事件，解析出url，将webview的src设置位url const webview = document.getElementById('f...

1 条评论您还未登录，请先登录后发表或查看评论

3-Electron打开新窗口，并跳转到指定的路由

最新发布

qkdgz的博客

08-21

582

Electron打开新窗口，并跳转到指定的路由

android中Webview内前进后退页面问题

木子帅的笔记

05-04

2497

WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_web_view); webV...

1.1.0 Electron 入门 Hello world

mejian1992的博客

02-03

224

VSCode Atom slack wordpress 项目安装 npm install electron --save-dev 全局安装 npm install -g electron 1.0 Hello World 项目目录 main.js var electron =require('electron') var app=electron.app var BrowserWindow=electron.BrowserWindow// 控制窗口的引用 ...

有了这个网络安全面试题，面试就像开了挂！（附PDF）

lvaolan的博客

02-26

928

还有兄弟不知道网络安全面试可以提前刷题吗？费时一周整理的160+网络安全面试题，金九银十，做网络安全面试里的显眼包！王岚嵚工程师面试题（附答案），只能帮兄弟们到这儿了！如果你能答对70%，找一个安全工作，问题不大。对于有1-3年工作经验，想要跳槽的朋友来说，也是很好的温习资料！【完整版领取方式在文末！！内容实在太多，不一一截图了。

electron 页面Menu、鼠标右键Menu和自定义快捷键globalShortcut（五）

黄彪博客

09-21

2639

文章目录案例知识点说明：全局快捷键和菜单快捷键的区别？案例 const { app, BrowserWindow, globalShortcut } = require('electron') const path = require('path') var mainWindow = null // 声明要打开的主窗口 const { Menu } = require('electron') app.on('ready', () => { // 设置窗口的高度和宽度 mainWindo

electron中使用webview

qq_43447509的博客

02-15

3623

使用webview标签 <webview src="https://www.baidu.com" preload="./preload.js"></webview> 向webview注入JS // preload.js const { contextBridge } = require('electron') contextBridge.exposeInMainWorld('apiKey', { fn: () => {} }) // 在webview页面使用 wind

electron框架的webview标签使用以及preload设置

amuist_ting的博客

03-29

8843

使用webview标签是为了在主页面中嵌入其他web页面内容，类似小窗口使用webview 1.主窗口对应的页面index.html 其中使用<webview>标签，src引入需要内嵌的web页面路径，可以是本地文件，也可以是远程请求，例如src=“https://www.douyin.com/”，引入抖音官网主页然后通过<script>引入渲染脚本 2.主窗口主进程入口文件main.js 该文件中，创建主窗口，并在创建过程中通过设置webPref.

electron-vue的webview详解及案例代码

日常笔记/总结/系列知识梳理

12-22

1074

使用WebView组件，您可以将网页内容嵌入到Electron应用程序中，并使用Vue组件来控制和管理WebView的内容。Electron-Vue中的WebView组件是一种用于在Electron应用程序中嵌入网页的组件。WebView组件允许您在Electron应用程序中呈现网页内容，并且可以与Vue组件进行交互。安装WebView组件：首先，您需要在项目中安装WebView组件。您可以使用npm或yarn来安装它。导入WebView组件：在您的Vue组件中，您需要导入WebView组件。

Electron 使用Webview 快速开发项目，达到web端一次开发多端共用

baidu_30907803的博客

02-23

1205

##目录结构 ```sh ├──assets#打包图片资源 ├──mac-tool#mac端打包需要的脚本文件 │└──preinstall#脚本文件--实现重装清缓存、卸载干净旧的包 ├──node_modules#npm本地依赖包 ├──Output#打包输出应用包 ├──renderViews#渲染进程视图，由...

如何利用 Electron 把网页变成桌面程序

热门推荐

前端开发博客

06-15

1万+

正如 Electron 官方所说“如果你可以建一个网站，你就可以建一个桌面应用程序”。作为一个跨平台的桌面应用开发框架，Electron 的迷人之处在于，它是建立在 Chromium 和...

初探Electron，从入门到实践

binmuoc89733的博客

08-29

191

本文由葡萄城技术团队于博客园原创并首发转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。在开始之前，我想您一定会有这样的困惑：标题里的Electron 是什么？Electron能做什么？许多伟大的公司使用Electron框架的原因又是什么？带着这些问题和疑惑，通过本文的介绍，可助您全面地认识Electron这门新兴的技术，迅速找到其入...

Android WebView由于重定向造成的goBack()无效的问题解决

learn_to_fly的博客

08-20

6458

最近项目中WebView返回时需要一级一级返回，就使用到WebView.goBack()方法。可当加载重定向的URL，出现了不能正常退出WebView的问题。问题描述比如，加载此重定向URL：http://news.cctv.com/m/la/index.shtml?id=ARTIPelLhipU21KF1nsbxpA7180816 在设置WebView的setWebViewClient...

1.1.4 Electron的菜单快捷键

mejian1992的博客

02-03

619

1 添加快捷键修改menu.js 添加一句 accelerator:'ctrl+n', 2 运行程序，使用快捷键ctrl

electron增加页面返回_Electron 文档风格指南

weixin_39604557的博客

11-30

854

标题每个页面顶部必须有一个单独的＃级标题。同一页面中的章节必须有##级标题。子章节需要根据它们的嵌套深度增加标题中的＃数量。页面标题中的所有单词首字母都必须大写，除了 “of” 和 “and” 之类的连接词。只有章节标题的第一个单词首字母必须大写.举一个Quick Start的例子:# Quick Start...## Main process...## Renderer...

electron增加页面返回_手把手教你Electron + Vue实战教程（六）

weixin_39759441的博客

11-25

686

作者： Sufen转发链接：https://mp.weixin.qq.com/s/nyIltq4WB7qtqqO_8LhzVw前言系列文章：手把手教你Electron + Vue实战教程(一)手把手教你Electron + Vue实战教程(二)手把手教你Electron + Vue实战教程(三)手把手教你Electron + Vue实战教程(四)手把手教你Electron + Vue实战教程(五)...

【Electron】-BrowserView模块的有趣玩法

qq_43326668的博客

05-22

1356

除了在Electron应用程序中显示Web内容外，BrowserView模块还可以用于实现一些有趣的玩法和应用场景。在本篇文章中，我们将介绍一些有趣的玩法和不同的用途，以展示BrowserView模块的灵活性和强大性。

electron如何使用webView

03-24

Electron使用WebView可以通过以下步骤进行： 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中使用了。