上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
12下一页
返回列表 发新帖

[油猴脚本开发指南]元素规则校验和检测的触发

[复制链接]

189

主题

1474

帖子

763

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
763
发表于 2021-11-11 11:11:11 | 显示全部楼层 | 阅读模式

前言

本文基于cxxjackie口述而写,请大家观看的时候默念cxxjackie永远的神!

正文

在平时我们经常可以碰到一个问题,就是明明设置了输入框或选择框的value,但是点击提交的时候依然会提示没有输入数据,无法正常提交,这是因为元素存在数据校验或者规则校验,我们触发一下规格校验使其正常检测一下就可以运行了,那我们该如何触发数据呢?

var event = new Event('change');
element.dispatchEvent(event);

我们使用new Event('事件名')来生成一个事件

element是我们对应的元素,通过对元素调用dispatchEvent传入事件,即可以正常触发

我们以

图片.png

为例

图片.png

这时候去掉祖先,还剩这些监听器

通常我们应该注意

input、change、propertychange

这里有一个input,我们尝试一下

图片.png

可以看到并没有效,我们再试了一下change,也不行,这是为什么呢?难道是我们的理论出错了么?

并不是,这是因为有的组件会直接监听,而有的组件会存在监听器触发的先后顺序

前者我们直接之前那样书写即可,而后者,我们需要在触发input监听器之前,先触发其他监听器

这里应该是focus,因为foucs是聚焦焦点,而blur是失去焦点,焦点就是点击后产生光标

关于每个监听器的含义大家可以百度一下

那么我们大概排序一下,可以确定应该是

focus聚焦

input输入内容

change内容改变

blur取消聚焦

图片.png

我们按这个顺序触发,可以发现已经没了检测,所以证明是对的

注意,这里dispatchEvent的东西是我声明的变量,已经提前new Event('名字')声明好了

根据多次测试,我们可以知道change没有任何作用

所以就变成了focus->input->blur即可

关于Jquery的处理方案

一部分复古网页依然在使用jquery,如果你window.$能看到金钱符号,并且能在源代码中看到美元.on代码

我们可以使用

$._data(对象,'events');

来获取事件列表,注意,在0.18.0版本之前应该使用data函数,而非_data函数

图片.png

可以看到有许多绑定的监听器

图片.png

通常我们找到对应的handle处理器即可

没有任何监听器的时候的处理方案

我们偶尔会遇到这样的输入框

图片.png

这里可以看到事件监听器是没有的

这时候我们可以尝试使用

    const evt = new Event('change');
    ele.dispatchEvent(evt);
    const prop = Object.keys(ele).find(p => p.startsWith('__reactEventHandlers'));
    ele[prop].onChange(evt);

该方法为react的,如果这种方式也不行,只能考虑自己查看框架源码找核心注入点进行hook了

我们来分析一下这种方法

const evt = new Event('change');

创建一个事件

ele.dispatchEvent(evt);

对其进行事件触发

const prop = Object.keys(ele).find(p => p.startsWith('__reactEventHandlers'));

获取元素的所有键名,并通过find函数进行查找,fine函数会根据传入的函数进行判断,返回正确的值,而我们的函数是判断前缀是否是__reactEventHandlers

ele[prop].onChange(evt);

获取到对应键名的对象,得到该对象的onchange函数,并且传入event

我们可以查看一下ele[prop]

图片.png

可以看到有onChange,onKeyDown等等

这些我们都可以进行尝试是否是我们想要的,但是要注意new Event的时候其事件名也要相应的改变

关于不是一个元素,而是一个元素内包含许多元素的解决方法

这种情况通常是其中某一个元素的prop内存在相应的方法

推荐获取该组件最上层的元素,导出prop查看,然后查看children内的prop是否有onchange等字样

如果有,则打印出来onchange,进入相应函数打断点,尝试是否在修改的组件内容的时候触发了断点

如果触发则证明是该函数

则直接传入对应数据即可

关于React搜索下拉框的处理

通常我们需要输入一些内容,触发下拉框然后触发点击,这时候就像我们之前所说的

需要进行组合事件

比如

parent[prop].children[0][0].props.onFocus()

通过最上方组件按child级找到底层哪个进行焦点触发,先进行焦点触发

input=document.querySelector('#idname input')

触发焦点后组件才进行input的渲染,这里我们找到input

input.__reactEventHandlers$xxxx.onChange({target:{value:'1234'}})

我们对input输入框触发修改,来让其进行搜索

然后获取返回结果,这里需要进行一定的延时

list=document.querySelector('.select li')

获取渲染出来的选择列表

list.__reactEventHandlersxxx.onClick()

回调触发选择的样式,完成选择。

如果不想这样可以参考下面的关于直接在数据修改的方法

关于如何更方便的调试

建议安装React Developer Tools插件

可以更简单的查看事件以及属性

关于我不想做网页点击代码,直接想在数据上进行修改

这时候我们可以直接在ReactDeveloperTools查看数据的绑定项,然后在代码中做相应的修改

图片.png

可以看到这里state的currentItem是存储选择的对象的

图片.png

我们可以直接组件的最上级的元素,然后根据存储对象的属性名一层一层往下找,这里可以发现在组件的最上层的元素的react属性的child的owner的memoizedState里存在currentItem属性,所以我们直接设置即可

但是这里又有一个问题,我们设置了属性,可以发现数据虽然改变了,但是页面没有改变,这是因为我们没有使用选择框进行点击,选择框点击后修改选择框内容,然后修改数据。

这个问题我目前没有找到很好的办法,即使找到目测也有一定的复杂程度,更推荐修改数据之后顺手innerHtml一下吧,也算挺方便的

Tips

但是注意一个问题,如果直接修改属性内容,可能也会导致页面的校验出现问题

这时候应该调用响应的触发函数并传入修改数据,来完成元素的数据校验

target.children[0]._owner.memoizedState.currentItem= 数据;

无法触发响应

target.children[0]._owner.memoizedProps.onSelected({name: 2002, key: 2002})

调用相关的函数,并传入对应的数据,可触发响应

关于React在__reactEventHandlers找不到

这个时候可以在控制台输入el.__react来看看都有哪些属性

也可能在__reactProps等属性中有对应的事件

结语

那么到这里我们就了解了如何触发组件的校验

在此感谢cxxjackie

混的人。

8

主题

173

帖子

254

积分

开发者

Rank: 6Rank: 6

积分
254

活跃会员热心会员突出贡献三好学生猫咪币纪念章中秋纪念章国庆纪念章

发表于 2021-11-11 12:08:27 | 显示全部楼层
李恒道 发表于 2021-11-11 11:17
@cxxjackie 大佬还有啥其他知识点么
大佬太牛逼了...这个知识根本没接触过

啊这,谬赞了,这个就是特殊框架特殊处理,没有什么特别的技巧,要说知识点的话每个框架可能都有自己的一套规律,实战还是要具体问题具体分析的。
回复

使用道具 举报

189

主题

1474

帖子

763

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
763
发表于 2021-11-11 11:17:13 | 显示全部楼层
@cxxjackie 大佬还有啥其他知识点么
大佬太牛逼了...这个知识根本没接触过
混的人。
回复

使用道具 举报

7

主题

117

帖子

462

积分

版主

Rank: 7Rank: 7Rank: 7

积分
462

活跃会员猫咪币纪念章推广达人宣传达人突出贡献三好学生热心会员中秋纪念章国庆纪念章

发表于 2021-11-11 12:46:36 | 显示全部楼层
李恒道
d=====( ̄▽ ̄*)b👍
是晚柒载哟
回复

使用道具 举报

189

主题

1474

帖子

763

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
763
发表于 2021-11-11 13:06:32 | 显示全部楼层
cxxjackie 发表于 2021-11-11 12:08
啊这,谬赞了,这个就是特殊框架特殊处理,没有什么特别的技巧,要说知识点的话每个框架可能都有自己的一 ...

我很好奇哥哥是咋知道这个的...翻源码了还是之前别人讲过鸭
混的人。
回复

使用道具 举报

8

主题

173

帖子

254

积分

开发者

Rank: 6Rank: 6

积分
254

活跃会员热心会员突出贡献三好学生猫咪币纪念章中秋纪念章国庆纪念章

发表于 2021-11-11 20:28:51 | 显示全部楼层
李恒道 发表于 2021-11-11 13:06
我很好奇哥哥是咋知道这个的...翻源码了还是之前别人讲过鸭

因为之前接触过几个react的页面,我做那个全局属性的脚本时又发现了不少东西,然后翻了一些文章+自己总结的。另外这么一说我又想起来,jquery可以通过$._data(ele, 'events')来获取到事件,这个应该知道的人比较多。
回复

使用道具 举报

189

主题

1474

帖子

763

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
763
发表于 2021-11-12 11:57:05 | 显示全部楼层
cxxjackie 发表于 2021-11-11 20:28
因为之前接触过几个react的页面,我做那个全局属性的脚本时又发现了不少东西,然后翻了一些文章+自己总结 ...

哥哥牛逼!
又get一个
我学前端的时候已经大部分vue了...jq基本没用过

混的人。
回复

使用道具 举报

189

主题

1474

帖子

763

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
763
发表于 2021-11-12 16:55:08 | 显示全部楼层
cxxjackie 发表于 2021-11-11 12:08
啊这,谬赞了,这个就是特殊框架特殊处理,没有什么特别的技巧,要说知识点的话每个框架可能都有自己的一 ...

大佬,又遇到一个问题!
我碰到一个组合式的输入框
大概是点击之后触发一个input,然后搜索,点击菜单项再在输入框里显示出来
我是这样处理的,不知道对不对

parent[prop].children[0][0].props.onFocus()

通过最上方组件按child级找到底层哪个进行焦点触发,先进行焦点触发

input=document.querySelector('#idname input')

触发焦点后组件才进行input的渲染,这里我们找到input

input.__reactEventHandlers$xxxx.onChange({target:{value:'1234'}})

我们对input输入框触发修改,来让其进行搜索

然后获取返回结果,这里需要进行一定的延时

list=document.querySelector('.select li')

获取渲染出来的选择列表

list.__reactEventHandlersxxx.onClick()

回调触发选择的样式,完成选择。

感觉好麻烦啊...
混的人。
回复

使用道具 举报

8

主题

173

帖子

254

积分

开发者

Rank: 6Rank: 6

积分
254

活跃会员热心会员突出贡献三好学生猫咪币纪念章中秋纪念章国庆纪念章

发表于 2021-11-12 20:28:22 | 显示全部楼层
李恒道 发表于 2021-11-12 16:55
大佬,又遇到一个问题!
我碰到一个组合式的输入框
大概是点击之后触发一个input,然后搜索,点击菜单项 ...

这个也不算麻烦吧,就算没有框架,正常用dispatchEvent也是差不多的流程,要说有什么可以优化的地方就是这个__reactEventHandlers$xxxx的属性名应该都是一样的,只需要查找一次保存起来就行了。
回复

使用道具 举报

189

主题

1474

帖子

763

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
763
发表于 2021-11-12 20:43:20 | 显示全部楼层
cxxjackie 发表于 2021-11-12 20:28
这个也不算麻烦吧,就算没有框架,正常用dispatchEvent也是差不多的流程,要说有什么可以优化的地方就是 ...

组件dom元素过多
找onfucs
onchange
onclick什么的太卧槽了
混的人。
回复

使用道具 举报

发表回复

本版积分规则

快速回复 返回顶部 返回列表