异步获取元素的脚本库 ElementGetter

player

cxxjackie 发表于 2023-11-24 22:00

get有数组功能呀，传入选择器数组，即返回元素数组。

我的意思的类似于querySelectorAll这这样的获取同id或类名的nodeList，而get总是获取第一个，数组选择器好像也只能是不一样的类名，传入多个同一类名也是相同的第一个。
而each的使用场景也不对，且有作用域的局限。
所以我期望能新增一个和get类似，但是能获取nodeList的功能。。。

cxxjackie

player 发表于 2023-11-25 17:36
[md]我的意思的类似于querySelectorAll这这样的获取同id或类名的nodeList，而get总是获取第一个，数组选 ...

这个需求本质上是对each功能的扩展，但是不好实现，因为列表何时加载完毕是不可知的，除非你明确知道需要几个，然后将列表长度作为参数传入，这样的话，简单包装下each方法即可实现：

1. elmGetter.gets = (selector, length) => new Promise(resolve => {
   
2.     const nodeList = [];
   
3.     elmGetter.each(selector, el => {
   
4.         nodeList.push(el);
   
5.         if (nodeList.length === length) {
   
6.             resolve(nodeList);
   
7.             return false;
   
8.         }
   
9.     });
   
10. });

复制代码

将each回调包装成Promise，应该可以解决你所说的使用场景问题。

szzxc

使用2.0版本，部分页面（内部页面）引用加载页面报了很多错误
Uncaugth TypeError: Cannot read property 'call' of undefined
at query (userscript.html?...... :71)
at filter(userscript.html?...... :146)
at eval(userscript.html?...... :53)
at Set.forEach(<anonymouus>)
at eval(userscript.html?...... :53)
at MutationObserver.eve(userscript.html?...... :52)

cxxjackie

szzxc 发表于 2023-12-11 14:10
使用2.0版本，部分页面（内部页面）引用加载页面报了很多错误
Uncaugth TypeError: Cannot read property ' ...

根据错误信息推测是matches有问题，可能浏览器不兼容（那其他页面应该也会报错），或者该页面劫持了matches，可以尝试将脚本执行时机提升到document-start，让库获取到原始引用，还是不行的话，尝试改用XPath或JQuery选择器。这个问题就是一个原生API变成undefined了，可能的原因有很多，不太好定位。

szzxc

改为document-start 好像不报错了，但找不到相关的元素。。是不是因为元素是在iframe id = "zxcframe"里面的原因..要怎么定位到这个iframe 或者说网页的全部元素。 document-start  加载又好像找不到iframe ..还没加载进来。

cxxjackie

szzxc 发表于 2023-12-12 09:03
改为document-start 好像不报错了，但找不到相关的元素。。是不是因为元素是在iframe id = "zxcframe"里面 ...

match进iframe内执行脚本是最简单的，如果是同源iframe想在外部操作，可以先用get获取到iframe元素，再将iframe.contentDocument作为父节点来执行后续操作，还要考虑iframe是否加载完毕等问题，挺麻烦的。
可参考：https://bbs.tampermonkey.net.cn/thread-2895-1-1.html

LinLin00

本帖最后由 LinLin00 于 2023-12-19 22:07 编辑

cxxjackie 发表于 2023-11-25 22:12

这个需求本质上是对each功能的扩展，但是不好实现，因为列表何时加载完毕是不可知的，除非你明确知道需要 ...

参考事件防抖 debounce 的思想，假定符合 selector 的元素连续出现，在某个指定的时间 delay 都没有再次出现之后，可以视为全部出现，以此来模拟 querySelectorAll 如何？

仿 elmGetter (opinionated version)
https://bbs.tampermonkey.net.cn/thread-5561-1-1.html
(出处: 油猴中文网)

肉豆蔻是中药嘞

感谢楼主分享，已经在使用了

szzxc

iframe内嵌页面好像获取不到相关元素

cxxjackie

szzxc 发表于 2024-2-21 08:57
iframe内嵌页面好像获取不到相关元素

是否跨域？没有的话将iframe.contentDocument作为parent参数传入。