css 注入,electron程序,如何在主进程远程页面中注入js及css?
本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规。大家都是程序员,不要闹得不开心。
每日一篇的苏南大叔写代码教程,又来了。在本文中,苏南大叔描述的是,在electron程序加载远程页面的时候,如何注入js或者css代码。这个需求,一般用于定制美化已有的某项网络服务。具体的嘛,您自己发挥您自己的想象力吧。这里不做过多描述。
electron程序,如何在主进程远程页面中注入js及css?(图4-1)
本文测试环境:mac/electron@5.0.7。其实,electron加载本地html页面的时候,也是可以通过本文的方法注入js或者css的。但是,似乎没有那个必要了,对吧?直接写到html里面,不是更好嘛?所以,本文的案例中,苏南大叔着重案例的就是加载远程页面的情况。
基本前提
代码放置于主进程,针对某个渲染进程进行设置,注意:默认情况下,第二个渲染进程窗口是不会被注入这些代码的。所以,请仔细斟酌代码注入的时机。
苏南大叔认为,代码注入的时机应该是原版页面加载完毕后。所以,对于渲染进程窗口mainWindow,监控了一个did-finish-load事件。本文的代码中,mainWindow就是被操作的渲染进程窗口对象。这个是本文的代码基础。//const fs = require("fs")
//const path = require("path")
//...
mainWindow.loadURL('https://newsn.net')
mainWindow.webContents.on("did-finish-load", function() {
//...
//这里放注入代码逻辑
//...
});
这里涉及到路径的部分,使用了path.join,这个是因为在打包前后会有所不同。不使用path.join,会报错无法找到对应文件。
electron程序,如何在主进程远程页面中注入js及css?(图4-2)
注入css
注入小段css代码:mainWindow.webContents.insertCSS("h3 a{background:red !important;}")
注入大段css代码://const css = require("fs").readFileSync('./insert/css.css').toString();
const css = fs.readFileSync(path.join(__dirname, './insert/css.css')).toString();
mainWindow.webContents.insertCSS(css);
electron程序,如何在主进程远程页面中注入js及css?(图4-3)
注入js
注入小段js代码:mainWindow.webContents.executeJavaScript('alert("this is a test!");');
注入大段js代码://const js = require("fs").readFileSync('./insert/js.js').toString();
const js = fs.readFileSync(path.join(__dirname, './insert/js.js')).toString();
mainWindow.webContents.executeJavaScript(js);
electron程序,如何在主进程远程页面中注入js及css?(图4-4)
聚焦位置输入文字
这个insertText()操作,其实是蛮有歧义的。这个insertText()函数,并不是像js或者css一样,在页面代码中插入文本,并不是想象中的那样的。
真实的效果是:在渲染进程的聚焦位置,输入文本。就是说:页面上有个自动聚焦的对象。
这个自动聚焦对象,要可以输入。
也就是说比如自动聚焦的input输入框之类的,就符合这个条件。在实际的应用中,上述条件导致:这个函数insertText()似乎也没有什么卵用。条件比较苛刻,效果比较的不明显。mainWindow.webContents.insertText("'test')")
总结
在本文中的例子中,有个值得注意的小细节:在代码层面上看的话,注入css在注入js的动作前面,然而在表现层面上来看,反而js的效果最新出现,而css的效果后出现。也许是个个案?
在electron程序中,注入js或者css的需求,就是这么解决的。更多electron相关经验文章,请参考苏南大叔的博客文章:
如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
css 注入,electron程序,如何在主进程远程页面中注入js及css?相关推荐
- Web项目中前端页面引用外部Js和Css的路径问题
公众号:南宫一梦 Web项目中前端页面引用外部Js和Css的路径问题 一般我们在做Web项目时,通常会将多个页面引入的公共js和css文件抽取出来,单独写成一个公共文件,以期方便各个页面单独引入,达到 ...
- 用JavaScript获取网页中的js、css、Flash等文件
目录 一.前言 二.从E书或网页中获取文件的一般步骤 三.从E书或网页中获取链接进来的css文件 四.从E书或网页中获取链接进来的js文件 五.从E书或网页中获取Flash文件 六.从E书或网页中获取 ...
- Django中载入js和css文件
Django中载入js和css文件 项目的文件夹结构例如以下: mysite |-mysite |-|-static |-|---js和css文件 |-|-|-init.py |-| |-models ...
- 网页自动切换html css js,HTML页面自动清理js、css文件的缓存(自动添加版本号)_HTML/Xhtml_网页制作...
这篇文章主要介绍了HTML页面自动清理js.css文件的缓存(自动添加版本号),小编觉得挺不错的,现在分享给大家HTML源码,也给大家做个参考.对HTML感兴趣的小伙伴们一起跟随小编过来看看吧 在we ...
- 大概是全网最详细的Electron ipc 讲解(一)——主进程与渲染进程的两情相悦
希沃ENOW大前端 公司官网:CVTE(广州视源股份) 团队:CVTE旗下未来教育希沃软件平台中心enow团队 「本文作者:」 image.png 前言 你盼世界,我盼望你无 bug .Hello 大 ...
- 小程序全局状态管理,在页面中获取globalData和使用globalSetData
GitHub: https://github.com/WozHuang/mp-extend 主要目标 微信小程序官方没有提供类似vuex.redux全局状态管理的解决方案,但是在一个完整的项目中各组件 ...
- 页面中color颜色值_HTML+CSS 基础知识-入门概括-颜色与单位
颜色与单位 一.颜色 1.概述 色调:很接近通俗意义上的颜色. 是指图像的相对明暗程度,在彩色图像上表现为颜色 饱和度:是指颜色中灰色的含量. 饱和度最大时,颜色中灰色的含量为零:饱和度最小时,颜 ...
- 删除页面引入的js或者css文件
有些时候,页面采用了集成方式,统一引入了一些js.css组件,如何单独移出不需要的组件. 移出代码 定义 function removejscssfile(filename, filetype) {v ...
- php 主进程子进程,PHP中的子进程的任何等价物?
通过双向通信,您可以访问stdin,stdout和stderr的最接近的等价物是 proc_open(). 以下是文档中的示例: $descriptorspec = array( 0 => ar ...
最新文章
- Recommender Systems基于内容的推荐
- linux c dns查询IP地址
- 转载:sqlmap的应用实战
- 中小型研发团队架构实践:微服务架构
- AtCoder Regular Contest 062 E - AtCoDeerくんと立方体づくり / Building Cubes with AtCoDeer
- [UE4]C++静态加载问题:ConstructorHelpers::FClassFinder()和FObjectFinder()
- 抖音封杀小猪佩奇,一年赚100亿的“社会人”得罪了谁?
- 计算机无法使用64位itunes,电脑itunes读iphone不了的解决方法
- Zabbix实现短信报警
- 2022年武汉市级产业化投资和技术改造专项以及工业智能化改造专项申报开始!13区申报条件、1千万补助
- 二次采样设置的四种彩色模式RGB565,ARGB8888,ARGB4444,ALPHA_8
- c语言mon什么意思,c'mon是什么意思啊 – 手机爱问
- 贪心算法---礼堂的安排
- 《我们应当怎样做需求分析》读书笔记
- 开源项目推荐:C++/MFC/Qt开发的功能齐全的屏幕截图软件ScreenCatch/Snipaste
- 扩计算机内存,如何扩大电脑内存
- 电销机器人源码开发+独立搭建的要点(一)
- 《富爸爸,穷爸爸》摘录-阮一峰
- 关于C++基础部分的梳理
- Linux SKB基本结构剖析