Electron注入SDK、SDK与页面进行交互、请求拦截
上面一篇文章介绍的HTTP请求拦截方式有问题,经过进一步的研究(查看官方文档+百度谷歌+各种测试验证),终于找到一种比较好的实现方式,下面来跟大家做一个详细的介绍:
第一步,在webRequest.onBeforeRequest的监听器中拦截请求,加载本地资源,具体判断流程如下图:
![c19e21f4e69bdccc65d2bd820cee7c2a.png](https://i-blog.csdnimg.cn/blog_migrate/8c33d702bc46e73f621c93ef43d3f506.jpeg)
请求拦截判断流程
参考实现代码如下:
![f4567f3b64efed5d76ebc44cf5ae1425.png](https://i-blog.csdnimg.cn/blog_migrate/5fcdbd07e71c34983df3f4cacc59a874.jpeg)
请求拦截实现代码
![456a00ed5d803083f3084825e04f9193.png](https://i-blog.csdnimg.cn/blog_migrate/9e78389a7e7be963cbd6a6e33b3d11da.jpeg)
重定向自定义协议地址
第二步,自定义协议,这里自定义协议scheme为zlzc,首先将一个scheme zlzc注册为标准scheme, 将保证相对和绝对资源在使用时能够得到正确的解析。 然后注册一个scheme为 zlzc 协议, 将 Buffer作为响应发送
![83514779407b4e719982055e8e7b5eb0.png](https://i-blog.csdnimg.cn/blog_migrate/32be132c1e1d86af0880926f06c31f10.jpeg)
注册自定义协议为标准scheme
![7ffdfdb83fbcb6e5a3f188e678a0f1d5.png](https://i-blog.csdnimg.cn/blog_migrate/b4a721f1efc8afda9eb6fa28dfb389e9.jpeg)
注册一个scheme为 zlzc 协议, 将 Buffer作为响应发送
第三步,拦截自定义zlzc buffer协议, 并将 handler作为该protocol新的处理方式,handler中读取本地文件内容,即返回一个Buffer对象数据,注意要指定mimeType。
![afc4728a5fe2281961e8130f18e03e47.png](https://i-blog.csdnimg.cn/blog_migrate/c3479894571b9509619e57d37a7bf0b9.jpeg)
读取本地文件内容,返回buffer对象数据
其中判断是否属于缓存资源代码如下:通过判断请求资源文件的后缀名确定,缓存html文件在加载时候会问题,故这里先注释了,后续有空再研究。
![ab3b89d9e7aa94c2a85dc8946a054b3a.png](https://i-blog.csdnimg.cn/blog_migrate/5500870de13325a41980d8fb9ee5579e.jpeg)
通过后缀名判断是否为缓存资源