Electron的WebView与加载的访客页之间的互相通信

最新推荐文章于 2024-12-30 17:51:04 发布

JwxDjango

最新推荐文章于 2024-12-30 17:51:04 发布

阅读量574

点赞数

CC 4.0 BY-SA版权

文章标签： electron javascript 前端信息与通信

本文链接：https://blog.youkuaiyun.com/JwxDjango/article/details/132884987

信息与通信专栏收录该内容

113 篇文章 ¥59.90 ¥99.00

订阅专栏

本文详细介绍了在Electron开发中，如何使用WebView组件与加载的访客页实现双向通信。通过预加载脚本和ipcRenderer模块，实现WebView与访客页之间发送和接收消息，以增强桌面应用的交互性。同时提醒注意启用Node集成时的安全措施。

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

Electron的WebView与加载的访客页之间的互相通信

在使用Electron开发桌面应用程序时，我们经常会使用Electron的WebView组件来加载外部的网页。WebView提供了一种将Web内容嵌入到Electron应用程序中的方式。在许多情况下，我们需要在WebView和加载的访客页之间进行双向通信，以便它们可以相互发送消息和数据。本文将详细介绍如何在Electron的WebView和加载的访客页之间实现互相通信，并提供相应的源代码示例。

首先，让我们看一下如何在Electron中创建一个简单的WebView。

const {
    app, BrowserWindow } = require('electron')

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

JwxDjango

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

electron+VUE Browserwindow与webview通信

immotal_xiaoqiang的博客

03-29

1790

如果能看到webview控制台里面的命令：window.electronAPI 说明已经通信成功了，后面就可以自己实现自己的逻辑了。1，porelaod注入的路径需要以file:///开头的绝对路径，如果不能保证可以直接在vue中如下写法来进行测试。例如：file:///C:/porelaod/webPreload.js。webview.openDevTools()打开webview的控制台。其中preloadPath需要以file:///开头的绝对路径。// 在webview中注入脚本。

桌面端框架Electron使用问题整理和总结

Jsoning的博客

02-26

5794

文章主要记录了使用electron日常开发中所遇到的一些坑以及怎样填坑，帮助其他开发的小伙伴少踩一些坑。建议关注收藏，以便遇到时候方便查阅！ electron这个框架我就不过多介绍了，是使用node和Chromium架构的一个桌面端框架，如果有了解使用web技术开发桌面端，这个框架多少会听说过或者正在使用。下面就记录一下自己在阅读文档的一些疑问以及开发过程中踩过的坑！ electron？ ...

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

electron的webView通信和如何在Electron中使用webView打开网页并获取DOM元素

qq_44984407的博客

02-23

4527

electron的webView通信

electron的webview和内嵌网页如何通信

yezi__6的博客

04-11

4042

由于我使用的是react框架的ref来引用webview组件的，因此需要通过这个引用来获取 webview 的 webContents，进而使用 executeJavaScript 方法。● 与页面交互：你可以使用 executeJavaScript 来注入和执行自定义脚本，从而与网页中的 DOM 进行交互，修改网页内容，或者触发在网页中定义的 JavaScript 函数。webContents 对象提供的一个功能，允许开发者在 web 页面的上下文中运行任意的 JavaScript 代码字符串。

Electron webview 内网页与 preload、渲染进程、主进程的常规通信以及企业级开发终极简化通信方式汇总

王森的博客

10-17

3717

preload.js 就像插件的 content script 与网页的原生的环境还是隔离的，两个环境的变量互不影响，比如在 preload.js给 window 追加一个函数A，在原生网页中window.A 是 undefined，所以 preload.js 是沙盒环境。实际代码，其中__static就是我们存放静态文件的地方，这个 static 是 electron 源代码根目录下的文件，最终打完包后会放在 dist/electron/ 根目录下。

electron webview通信

独行侠的博客

05-16

7318

1、在webview标签所在的html页面，代码如下：2、在被webview加载的页面，代码如下：3、在webview标签所在的html页面的控制台输出：4、在被webview加载的页面的控制台输出：...

electron原生和<webview>的通信交互

前进者

10-31

9883

目录 1、缘由 2. 标签介绍 3、代码实现： 4、注意事项 1、缘由开发electron项目的时候，因为每次更改新功能都要重新打包，还要做热更新的操作，借鉴原生App和h5，（H5要调起原生的拍照功能，发一个信号给原生，原生接到信号唤醒摄像头，成功或者失败发个回调给H5）发现<webview>标签可以实现， 2. <webview>标签介绍使...

webview监听事件

08-24

另外，还可以使用webview.send()方法来向webview发送消息，并在访客页使用ipcRenderer.on()方法来监听这些消息。通过这种方式，可以实现webview之间的交流和信息传递。<span class="em">1</span><span class="em">2...

Electron 词汇术语表

天空之外

05-30

253

本节我们来学习经常在 Electron 开发中使用的专业术语。 ASAR ASAR 表示 Atom Shell Archive Format（Atom外壳存档格式），一个 ASAR 档案就是一个简单的 .tar 文件，也就是说是那些有关联的文本文件格式化到一个单独的文件中。并且 Electron 能够任意读取其中的文件而不需要解压整个文件。创建 ASAR 格式主要是为了提升 Windows 平台上的性能而创建。 Brightray 简单的将libchromiumcontent应用到应用中的一个静态库，该术

Trello与Notion API集成：定制化解决方案打造指南

在当今的数字化时代，各种软件和应用程序之间的交互变得越来越频繁。为了提高工作效率和简化工作流程，将不同的工具和服务通过API（应用程序编程接口）集成已经成为了一种常见的做法。本章节将简要介绍Trello和...

electron的webview与加载的访客页之间的互相通信

heartOfblack 离开了电脑，我不希望我还有病

10-11

6959

webview 调用加载页方法通过&lt;webview&gt;.executeJavaScript(code[, userGesture, callback]) 访客页需要调用webview所在页面的方法，则需要在webview中加上属性 nodeintegration=“true” 当有此属性时, webview 中的访客页（guest page）将具有Node集成, 并且可以使用像 r...

electron 网页和主进程通讯

weixin_33937778的博客

12-19

1018

前端网页 import { RxIpc } from 'rx-ipc-electron/lib/rx-ipc'; export const IsElectron = window.navigator.userAgent.toLowerCase().indexOf('electron') !== -1; export functio...

electron 中 webview的使用

weixin_50307964的博客

03-22

2662

我们在开发的过程中难免会遇到需要创建一个子窗口（子进程），但是在这个子进程中所有值都是初始化的，而我们肯定是需要一些值才能进行下一步操作，比如：token；那么我们怎么去传递值呢？我先给伙伴们说一些，基本原理（下面很多东西会建立在vue的基础上，如果是其他框架就自行修改就行），然后再给大家根据代码一步一步操作。大家看到这儿可能觉得很麻烦，但是如果我们在创建新窗口的时候就传递值的话，可能子进程的渲染进程拿不到值；所以我们当时搞了这种方法，目前运行半年以上基本上都没得问题；

关于 Electron webview 通信问题

最新发布

weixin_66909686的博客

12-30

461

关于 Electron webview 通信问题 Webview 渲染进程 👈👉 Webview 预加载脚本

electron 标签webview

weixin_43294560的博客

04-30

3513

作用: 将网页内嵌到桌面客户端程序中，可以对引入的网页进行自定义操作,如注入脚本、css等用法: <webview src='网页url' /> 常用事件: webview对象.addEventListener('did-start-loading',回调); 网页加载前回调 wenview对象.addEventListener('did-stop-loading'...

Electron WebView 完全指南

gitblog_00988的博客

08-26

635

Electron WebView 完全指南项目地址:https://gitcode.com/gh_mirrors/el/electron-webview 1. 项目目录结构及介绍 ├── assets # 资源文件夹，存放图标和其他静态资产 │ ├── icons # 图标子文件夹 │ └── png ...

electron 内主进程与渲染进程，webview之间的通信

weixin_30287169的博客

11-08

523

　　　这里先插个题外话，什么是进程，为什么要分主进程子进程？首先进程是资源分配的单位，是运行的程序，一个进程自然只能代表一个程序，多道程序自然而然就产生了多进程的概念。进程中通过CreateProcess（）函数去创建一个子进程，子进程在全部处理过程中只对父进程地址空间中的相关数据进行访问，从而可以保护父进程地址空间中与当前子进程执行任务无关的全部数据。对于这种情况，子进程所体现出来的作用同函数和...

Electron 中 webview 如何与主进程渲染进程进行事件监听通信非常实用

weixin_42333548的博客

06-14

7249

webview 调用加载页方法通过<webview>.executeJavaScript(code[, userGesture, callback])或者webview.send()发送，而在访客页使用ipcRenderer.on()监听下面分为四个方面：第一：web页面向客户端如何发送消息（对应如下第1点 -- 1）第二：客户端如何接收web页面发送过来的消息（对应如...

electron webview 页面加载事件顺序

05-25

在 Electron 中，`webview` 元素的页面加载事件顺序如下： 1. `did-start-loading`: 当页面开始加载时触发。 2. `did-frame-finish-load`: 当页面中的所有子框架都加载完成时触发。 3. `did-finish-load`: 当页面完全加载完成时触发。 4. `dom-ready`: 当页面的 DOM 树已经准备好时触发。 5. `did-stop-loading`: 当页面停止加载时触发。需要注意的是，`dom-ready` 事件在 `did-frame-finish-load` 和 `did-finish-load` 事件之后才会触发。此外，`did-frame-finish-load` 事件可能会多次触发，因为页面中可能包含多个子框架。