Electron获取webview中ajax请求内容的方法

最新推荐文章于 2024-08-05 14:32:09 发布
最新推荐文章于 2024-08-05 14:32:09 发布
阅读量9.1k 收藏 9
点赞数
分类专栏： Web前端技术 文章标签： electron ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tinder1024/article/details/86487567
版权
本文介绍了如何在Electron应用中利用webview的preload特性，劫持原生XHRHttpRequest类来获取ajax请求的内容。由于 Electron 的 webRequest 模块无法直接获取请求内容，特别是对于不能重复的POST请求，作者提出了一种解决方案，即通过在preload脚本中替换原生的XHR类，实现在请求发送前捕获内容，然后通过ipcRenderer.sendToHost将内容传递到主进程。
摘要由CSDN通过智能技术生成

Electron中，可以通过WebRequest监听webview中请求的各个阶段，并且获取或修改请求头和响应头。

但却没有提供获取请求内容的方法。那么如何获取请求内容呢？

首先，我们可以通过比较暴力的方法，就是在webRequest.onCompleted时，重新利用如http模块，对url再发送一次请求，从而获取请求内容。

但这个方法也有弊端，那就是，某些ajax请求，是不能重复的，尤其是POST请求。

比如一个点赞功能，第一次请求服务端会返回成功。第二次再请求，服务端就会报错了。

那么如何做才能直接获取到ajax请求的内容呢？

接下来，我教大家一种方法，就是

利用webview的preload功能，劫持原生XHRHttpRequest类，来实现在Electron中获取ajax请求内容

原理是，Electron的webview标签，有个preload属性，可以在页面加载之前，注入指定的js脚本，并且这个js脚本是一定集成了node环境的。

那么我们就可以在这个脚本中，将原生的XHRHttpRequest类替换掉。每当页面中通过XHRHttpRequest发送ajax请求是，我们就可以先拿到内容，再返回给页面了。废话不多说，直接上代码

代码基于ES6 

/**
 * xhr_proxy.js
 * 通过劫持原生XMLHttpRequest实现对页面ajax请求的监听
 * @author binaryfire
 */
const READY_STATE_CHANGE = 'rea
最低0.47元/天 解锁文章
binaryfire
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
electron-webview-schedule:Webview调度管理，支持Electron的异步队列
05-01
电子网页时间表 Webview调度管理模块，支持Electron的异步队列。分期付款$ npm i electron-webview-schedule --save用法在渲染器过程中导入。 import moment from 'moment' ;import PromiseQueue from 'electron-...
禹神：一小时快速上手Electron，前端Electron开发教程，笔记。一篇文章入门Electron
宝码香车的博客
07-16 5237
1.后面有的bug可能与Electron Forge配置有关。有时间试试，找个解决方案。2.也有可能与main.js写法有关。3.打包时删除main.js里的win.openDevTools() //自动打开调试窗口否则软件会自动打开调试窗口。4. 代码仓库位置终于完成，虽然有bug,但能运行起来了。后续找个更好的解决方案。
我的 Electron 客户端被第三方页面入侵了
最新发布
公众号：该用户快成仙了
08-05 905
公司有个内部项目是用 Electron 来开发的，有个功能需要像浏览器一样加载第三方站点。 本来一切安好，但是某天打开某个站点的链接，导致 整个客户端直接变成了该站点的页面。 这一看就是该站点做了特殊的处理，经排查网页源码后，果然发现了有这么一句代码。
electron ajax路径,Electron踩坑记
weixin_39860755的博客
08-05 870
最近一直在做Electron的项目,随着项目的上线,在此做一点总结。本文主要记录一些坑点，整个Electron的搭建流程有很多文章说的非常好了，就不赘述了。主要包括关于主进程和渲染进程通信的痛点持久化数据的方案选型打包后文件目录的访问权限关于主进程和渲染进程通信的痛点先看一下官方的说明Electron为主进程( main process)和渲染器进程(renderer processes)通信提供...
electron获取webview远程网址中的dom元素
总结，交流，记录，成长
05-09 8462
如获取csdn上的元素：<webview id="foo" src="https://www.csdn.net/" autosize="on" minwidth="576" minheight="432" preload="./test.js"></webview> 用preload，test.js const waitForExternal = setInterval((...
electron中交互第三方网站
weixin_50307964的博客
06-05 312
在以前的文章中讲过electron 中 webview的使用 大家可能也都知道webview是可以将一个第三方网站渲染在你软件上的一个组件。 那么我们就想既然可以渲染到我的软件上了，那我可不可以让我的软件自动的去做一些操作呢？ 需求 如：掘金网站 用户点击文章 用户浏览文章 用户给文章点赞 我们要实现以上的三个功能就需要去官方了解executeJavaScript的使用方法。(注：...
electron中使用webview
qq_43447509的博客
02-15 3615
使用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>的通信交互
前进者
10-31 9396
目录 1、缘由 2. 标签介绍 3、代码实现： 4、注意事项 1、缘由 开发electron项目的时候，因为每次更改新功能都要重新打包，还要做热更新的操作， 借鉴原生App和h5，（H5要调起原生的拍照功能，发一个信号给原生，原生接到信号唤醒摄像头，成功或者失败发个回调给H5）发现<webview>标签可以实现， 2. <webview>标签介绍 使...
electron获取系统字体
01-08
在 Electron 框架中，实现获取系统字体的需求可以通过第三方库 `font-list` 来完成。`font-list` 是一个能够列举操作系统中可用字体的工具，适用于多种平台，包括 Windows、Mac 和 Linux。以下是实现这一功能的具体...
test-electron-vue用来获取电脑mac地址
04-20
在Electron中，可以使用`os`模块提供的`networkInterfaces()`方法来获取网络接口的信息。在Vue组件中，你可以通过以下方式引入并使用`os`模块： ```javascript import os from 'os'; export default { data() { ...
electron-webview-ipc-test:通过Webview演示Electron中的IPC的测试
05-21
电子webview-ipc测试一种通过webview演示Electron中IPC问题的测试。 最初创建该文件是为了演示一个问题，即当更改Webview源时，IPC将在Webview和主流程之间消失。 在0.27.3及更高版本中应该可以正常工作。
electron-webview-ime-fix
05-26
标题“electron-webview-ime-fix”指的是一个针对Electron框架中的特定问题的解决方案，这个问题涉及到在Webview组件中输入法（IME，Input Method Editor）的位置显示不正确。Electron是一个流行的开源库，它允许...
electron监听网页_【Electron】Electron开发入门（七）：打开本地文件或者网页链接 and webview里操纵electron api...
weixin_33462167的博客
02-23 686
1.打开本地文件或者网页链接// 打开系统本地文件const {shell} = require(‘electron’);// Open a local file in the default appvar path1 = “d:\ProjectsSpace\ElectronProjects\ElectronTest2\app\html\config\record.txt”;shell.openI...
electron监听网页_Electron中实现通过webview实现内嵌网页并嵌入css样式和js脚本等...
weixin_34552961的博客
02-23 1742
场景用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld：Electron怎样进行渲染进程调试和使用浏览器和VSCode进行调试：在上面搭建好项目以及知道怎样进行调试后如果要想将某些web网页内嵌进来，类似于iframe的效果。注：实现显示webview首先在html中添加webview标签直接通过src属性设置要内嵌的网页的地址。然后打开mai...
electron webview会加载两次_electron中的ipc通信（三）
weixin_30586417的博客
01-15 1038
深圳的天气骤降，还是挺冷的，大家要注意保暖。微信公众号：[猫十二的日常]，欢迎留言和指出问题a上次写了关于ipc通讯的一些方式，主要都是web页面向主进程通讯，主进程回复通讯，这个感觉和http有点相似，发送一个http资源的请求，服务返回一个资源结果，现在我们主要看这两个点主进程主动推消息给web渲染进程的web渲染进程之间的通讯主进程向渲染进程主动通信这个可能就牵扯到了一个比较重要的...
Electron 中 webview 如何与主进程渲染进程进行事件监听通信 非常实用
weixin_42333548的博客
06-14 6862
webview 调用 加载页 方法通过<webview>.executeJavaScript(code[, userGesture, callback])或者webview.send()发送，而在访客页使用ipcRenderer.on()监听 下面分为四个方面： 第一：web页面向客户端如何发送消息（对应如下第1点 -- 1） 第二：客户端如何接收web页面发送过来的消息（对应如...
electron中实现通过webview实现内嵌网页并嵌入css样式和js脚本等
weixin_46918498的博客
10-22 1775
<webview id="geekori" src="https://baidu.com" style="width:400px; height:300px" ></webview> 参考：https://www.cnblogs.com/badaoliumangqizhi/p/12995335.html
electron ajax路径,Electron获取webview中ajax请求内容的方法
06-07
Electron中可以使用`<webview>`标签来嵌入一个Web页面，通过`webview`提供的`loadURL(url)`方法可以加载一个URL，加载完成后可以通过监听`did-finish-load`事件来获取页面内容。而想要获取`<webview>`中的ajax请求内容，可以通过以下步骤实现： 1. 在`<webview>`标签中添加`preload`属性，指向一个自定义的JavaScript文件，该文件会在页面加载前被注入到页面中。 ```html <webview src="https://example.com" preload="./preload.js"></webview> ``` 2. 在自定义的JavaScript文件中，监听`XMLHttpRequest`的`send`方法，获取`XMLHttpRequest`发送的请求的URL和参数。 ```javascript const { XMLHttpRequest } = require('electron').remote XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send XMLHttpRequest.prototype.send = function (data) { this.addEventListener('load', () => { if (this.responseURL.indexOf('your_ajax_url') > -1) { console.log('ajax请求URL：', this.responseURL) console.log('ajax请求参数：', data) console.log('ajax请求返回结果：', this.response) } }) this.realSend(data) } ``` 3. 在`<webview>`中加载的页面中，发送ajax请求时会触发自定义的JavaScript文件中的`XMLHttpRequest`的`send`方法，从而获取到请求的URL、参数和返回结果。 需要注意的是，为了避免跨域问题，需要在`<webview>`加载的页面中设置CORS头部，允许跨域请求。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值