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

最新推荐文章于 2025-06-12 11:18:38 发布
最新推荐文章于 2025-06-12 11:18:38 发布
阅读量9.3k 收藏 3
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： electron
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/amuist_ting/article/details/123826453
本文详细介绍了如何在Electron框架下使用webview标签嵌入网页内容，以及设置preload属性实现主进程与渲染进程的通信。通过实例展示了从主窗口到webview内部的事件处理流程，并强调了预加载脚本的作用和限制，如在不同进程间事件触发的范围。

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

使用webview标签是为了在主页面中嵌入其他web页面内容，类似小窗口

 

使用webview

1.主窗口对应的页面index.html

其中使用<webview>标签，src引入需要内嵌的web页面路径，可以是本地文件，也可以是远程请求，例如src=“https://www.douyin.com/”，引入抖音官网主页

然后通过<script>引入渲染脚本

2.主窗口主进程入口文件main.js

该文件中，创建主窗口，并在创建过程中 通过设置webPreferences的preload属性来引入预先加载的js脚本，通过设置webviewTag属性为true，才能在使用webview标签

该文件中，通过ipcMain.handle(eventName,function(){})来设置具体的事件处理过程，并返回一个结果，这个结果会在渲染进程中拿到

3.预加载脚本preload.js文件<

最低0.47元/天 解锁文章

200万优质内容无限畅学
Electron中Webview与渲染进程和主进程通讯方式揭秘
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
02-19 129
在Electron开发中，webview的使用是很常见的 但很多人对于webview与渲染进程、主进程的通讯方式不太清楚 网上的相关文章很多都不详细，Electron官网的介绍也不够深入 本文将详细介绍Electron中webview与渲染进程、主进程的通讯方式，希望对大家有所帮助webview的API中，与通讯相关的主要有两个事件：did-attach和ipc-message did-attach事件在webview被附加到页面时触发，ipc-message事件在webview接收到IPC消息时触发 详细
Electron为网页注入js预加载
fukami666的博客
03-24 7241
Electron为网页注入js预加载准备工作main.jspreload.jspackage.json遇到的问题下一步的方向 准备工作 首先我下载了一个 electron-quick-start 并安装 node.js 找到一个网页，我选择的是一个快速制作插画的网站 Picrew main.js 在main.js里可以修改弹窗的各种属性，我们需要的是 function createWindow () { const mainWindow = new BrowserWindow({ webPref
electron中使用webview
qq_43447509的博客
02-15 3764
使用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、 渲染进程、主进程的常规通信 以及企业级开发终极简化通信方式汇总
王森的博客
10-17 3808
preload.js 就像插件的 content script 与网页的原生的环境还是隔离的，两个环境的变量互不影响，比如在 preload.js给 window 追加一个函数A，在原生网页中window.A 是 undefined，所以 preload.js 是沙盒环境。实际代码，其中__static就是我们存放静态文件的地方，这个 static 是 electron 源代码根目录下的文件，最终打完包后会放在 dist/electron/ 根目录下。
【小程序开发】web-view 标签详解
最新发布
qq_65142821的博客
06-12 928
本文介绍了小程序开发中web-view组件的使用方法和注意事项。web-view类似于iframe，用于嵌入网页内容，常用于展示协议、活动页等。微信小程序要求嵌入网页必须使用HTTPS协议并配置业务域名，需通过后台验证。uni-app中使用web-view时需要采用页面组件方式。文章详细说明了业务域名的配置流程，并提示公众号文章链接不能直接嵌入。掌握这些要点能帮助开发者合理利用web-view组件，实现小程序与网页内容的集成。
electron webview iframe执行preload (nodeintegrationinsubframes)
joy1793的博客
04-15 3066
项目场景： electron 项目，webview页面 的 子iframe页面 加载 preload.js 解决方案： 在主线程 main.js 中 需要打开权限 nodeIntegrationInSubFrames: true 在页面标签中也需要打开权限 nodeintegrationinsubframes main.js async function createWindow() { // Create the browser window. const win = new Browser
electron preload
DisMisPres的博客
09-17 2176
背景 最近手头的 electron 项目需要做一个报告导出的功能，导出时要弹出个页面，可让用户自行补全相应的字段。 由于公司已有现成的笔录工具，现直接将其集成进来，用 webview 直接展示其笔录页面，将已有的值传给笔录。 webview 简介 electron 的 webview 标签时基于 Chromium webview ，由于 Chromium 的架构变化巨大，会影响 electron webview 的稳定性，包括呈现、导航和事件路由。所以 electron 团队不建议使用 webview 标
Electron：webview的基本使用
weixin_50236973的博客
11-25 484
Electron：webview的基本使用
Electron使用preload预加载及安全策略
热门推荐
qq_30386941的博客
10-27 1万+
使用 Electron 很重要的一点是要理解 Electron 不是一个 Web 浏览器。它允许您使用熟悉的 Web 技术构建功能丰富的桌面应用程序，但是您的代码具有更强大的功能。JavaScript 可以访问文件系统，用户 shell 等。这允许您构建更高质量的本机应用程序，但是内在的安全风险会随着授予您的代码的额外权力而增加。
electron 标签webview
weixin_43294560的博客
04-30 3579
作用: 将网页内嵌到桌面客户端程序中，可以对引入的网页进行自定义操作,如注入脚本、css等 用法: <webview src='网页url' /> 常用事件: webview对象.addEventListener('did-start-loading',回调); 网页加载前回调 wenview对象.addEventListener('did-stop-loading'...
electron如何使用webpack打包webview标签中的preload文件
SDFGS54DGF5S4的博客
01-21 3656
注意：本文基于electron-vue项目（在vue2项目上运行vue add electron-builder命令搭建而成） 并在electron8.5.5及9.0.0测试过 在webview中开发者可以使用preload预加载并执行js文件 官方文档 网上以及官方的很多例子都是传入一个相对路径的String，并没有以file://开头。然而我这里只能传入String字符串并且是file协议的，electron会检测是不是以file://开头，不符合就会报错（不知道是不是我配置有问题还是啥…反正只要不以
Electron - webview 标签
lzgy的博客
01-08 1097
webview标签 文档地址: webview 标签 在一个独立的 frame 和进程里显示外部 web 内容。 使用 webview 标签在Electron 应用中嵌入 “外来” 内容 (如 网页)。"外来"内容包含在 webview 容器中。 应用中的嵌入页面可以控制外来内容的布局和重绘。 注意： By default the webview tag is disabled in Electron >= 5. 在构造 BrowserWindow 时，需要通过设置 webviewTag webPre
webview获取标签内容
06-13
webView执行js代码获取标签内容
Electron -- 预加载脚本preload.js（三）
qq_35876316的博客
12-24 513
preload.js是一个在渲染进程加载之前执行的脚本，它有权访问渲染器全局（例如window和document）和 Node.js 环境（主进程）。这个脚本在网页内容加载之前执行，它具有比普通渲染器更高的权限，可以访问 Node.js API，同时也可以与网页内容安全的交互。在 Electron 的配置中指定preload.js路径。
electron 中 webview的使用
weixin_50307964的博客
03-22 2719
我们在开发的过程中难免会遇到需要创建一个子窗口（子进程），但是在这个子进程中所有值都是初始化的，而我们肯定是需要一些值才能进行下一步操作，比如：token；那么我们怎么去传递值呢？我先给伙伴们说一些，基本原理（下面很多东西会建立在vue的基础上，如果是其他框架就自行修改就行），然后再给大家根据代码一步一步操作。大家看到这儿可能觉得很麻烦，但是如果我们在创建新窗口的时候就传递值的话，可能子进程的渲染进程拿不到值；所以我们当时搞了这种方法，目前运行半年以上基本上都没得问题；
Electron WebView 完全指南
gitblog_00831的博客
08-26 606
Electron WebView 完全指南 项目介绍 Electron WebView 是一个基于 Electron 的简易示例应用，它展示了如何创建一个具备高级特性且包含 WebView 标签的 Electron 应用程序。这个项目利用 WebView 标签来内嵌Web内容，提供一个类似Android WebView的功能，在Electron环境中独立运行一个网页视图，允许开发者对页面进行一定程...
使用Electron的webview组件开发一款无跨域功能的浏览器
xiaocuige007的博客
11-01 7743
浏览器下载地址 1.Webview空白问题 问题描述： 一下代码webview显示为空白页 <webview class="indexWebview" width='200' height='300' style="display: inline-flex;" src='http://www.baidu.com'></webview> 解决方案 const mainWindow = new BrowserWindow({ webPreferences: { w
【Electron】webview 实现网页内嵌
m0_64494670的博客
12-30 3057
Electron内通过 webview标签实现网页内嵌动态切换技术
electron webview preload
10-25
Electron中的webview是一个可以嵌入其他网页的组件，而preload则是在webview中加载的预处理脚本。它可以在webview中的渲染进程中执行一些操作，例如向主进程发送消息或者修改DOM元素。但是需要注意的是，由于webview是在独立的渲染进程中运行的，因此无法直接访问主进程中的代码和变量。为了解决这个问题，可以在创建webview时设置preload属性，将预处理脚本引入到webview中，从而在webview中可以访问主进程中的代码和变量。 然而，需要注意的是，由于webview是在独立的渲染进程中运行的，因此无法触发在主窗口或者其他webview中定义的事件。如果需要在webview中触发事件，可以在webview中引入预处理脚本，并在预处理脚本中定义事件处理函数。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值