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

[油猴脚本开发指南]脚本自动化之模拟点击和表单填写

  [复制链接]
  • TA的每日心情
    慵懒
    昨天 00:09
  • 签到天数: 67 天

    [LV.6]常住居民II

    150

    主题

    2001

    帖子

    2133

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    2133

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

    发表于 2020-12-6 16:07:30 | 显示全部楼层 | 阅读模式
    本节主要内容:
    首先将介绍模拟点击和表单填写的原理,然后使用脚本实现一个自动化登录论坛的功能
    论坛更新后页面自动登录例子
    https://bbs.tampermonkey.net.cn/thread-1326-1-1.html


    模拟点击
    前端开发的同学应该都写过下面类似的代码,主要是监听一个按钮的click事件,用以实现一些功能.
    1. //html
    2. <button id="btn" onclick="click()">按钮</button>
    3. //js
    4. btn.onclick=function(){
    5. alert('按钮被点击了')
    6. }
    7. //jq
    8. $('#btn').click(function(){
    9. alert('按钮被点击了')
    10. });
    复制代码

    我们模拟点击其实就是希望能够执行这个按钮点下后的事件.
    方法一:
    如果是上面的html的写法,我们可以直接找到点击后的事件,然后直接执行.不过这种方法使用场景有限,不是很推荐.
    1. click();
    复制代码
    方法二:
    如果是js监听事件的方法,我们可以先用'document.querySelector'找到btn元素,然后执行'btn.click()'.这是比较推荐的方法.当然除了'document.querySelector'外还可以用jQuery,document.getElementByXXX之类的方法,只要能够找到并操作DOM元素就行了.(个人习惯querySelector,后续也使用querySelector来编写)
    1. var btn=document.querySelector('#btn');
    2. btn.click();
    复制代码


    表单填写
    关于表单填写也就是form,我们需要自动化的实现在input,checkbox,select等元素中填写或者选择我们希望的内容,例如自动选择正确答案和自动填写账号.其实也很简单,我们只需要使用querySelector查到我们想操作的元素就行了.
    例如我想操作某个输入框:
    1. var input=document.querySelector('#input');
    2. input.value="油猴中文网";
    复制代码
    操作多选框:
    1. var checkbox=document.querySelector('#checkbox');
    2. checkbox.checked=true;
    复制代码


    使用自动化登录论坛
    接下来使用我们刚刚的内容来实现一个自动化登录论坛的脚本.我们期望的功能是,打开论坛首页时,检测是否登录,如果未登录就自动填写配置好的账号密码进行登录,并且勾上自动登录选项.

    第一步,判断是否登录:
    在未登录的时候,我们的上方是一个登录框框,而不是用户的信息,那么我们可以查找上方是否有编辑框来判断是否是登录状态.(当然还有其它的很多办法)
    QQ截图20201206155412.jpg
    按下F12打开开发者工具,选中用户这个框可,可以看见他有一个id和一些其它信息,id一般是这个页面唯一的,那么我们可以直接使用id来查询它,来看看它在不在这个页面上,在就表示没有登录.
    QQ截图20201206155644.jpg
    代码就像这样:
    1. if(document.querySelector("#ls_username")==null){
    2. //没有找到表示登录了,不再执行后续代码
    3. return;
    4. }
    5. //未登录,执行登录代码
    复制代码


    第二步,我们要将我们的账号信息填入进去,并且勾上自动登录选项
    和上面的一样,使用f12开发者工具,找到用户名编辑框,密码编辑框,自动登录多选框.然后填入value和checked设置为true.
    代码就像这样:
    1. document.querySelector("#ls_username").value="账号";
    2. document.querySelector("#ls_password").value="pwd";
    3. document.querySelector("#ls_cookietime").checked=true;
    复制代码

    最后一步,点击登录按钮,就可以啦!
    但是发现好像这个按钮没有id,没关系,我们可以使用它的上级class和type等信息来定位:
    QQ截图20201206160448.jpg

    1. document.querySelector(".fastlg_l button").click();
    复制代码


    其实这些内容都很简单,我相信你很快就能上手.如果你是一名前端开发,甚至可能你还会觉得就这?

    脚本安装地址:https://bbs.tampermonkey.net.cn/thread-92-1-1.html



    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
  • TA的每日心情
    开心
    2022-3-8 00:18
  • 签到天数: 2 天

    [LV.1]初来乍到

    34

    主题

    202

    帖子

    252

    积分

    版主

    Rank: 8Rank: 8

    积分
    252

    猫咪币纪念章突出贡献热心会员活跃会员

    发表于 2020-12-6 17:10:58 | 显示全部楼层
    阿巴阿巴阿巴阿巴阿巴阿巴
    一叶叶,一声声,空阶滴到明。
    回复

    使用道具 举报

    该用户从未签到

    1

    主题

    17

    帖子

    9

    积分

    助理工程师

    Rank: 1

    积分
    9

    新人报道

    发表于 2020-12-17 21:32:06 | 显示全部楼层
    阿巴阿巴
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    1

    帖子

    13

    积分

    助理工程师

    Rank: 1

    积分
    13
    发表于 2021-1-6 14:12:20 | 显示全部楼层
    很喜欢这样的学习机会
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2022-3-8 00:18
  • 签到天数: 2 天

    [LV.1]初来乍到

    34

    主题

    202

    帖子

    252

    积分

    版主

    Rank: 8Rank: 8

    积分
    252

    猫咪币纪念章突出贡献热心会员活跃会员

    发表于 2021-1-9 09:02:34 | 显示全部楼层
    笔趣阁的自动登录
    请大佬讲一下match的用法呗还有include,之前match网站首页就只能在网站首页运行我这个用法是从别的脚本抄的。
    2021-01-09_090016.png
    一叶叶,一声声,空阶滴到明。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    昨天 00:09
  • 签到天数: 67 天

    [LV.6]常住居民II

    150

    主题

    2001

    帖子

    2133

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    2133

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

    发表于 2021-1-11 19:19:25 | 显示全部楼层
    陈孤岛 发表于 2021-1-9 09:02
    笔趣阁的自动登录
    请大佬讲一下match的用法呗还有include,之前match网站首页就只能在网站首页运行我这个用 ...

    https://bbs.tampermonkey.net.cn/thread-88-1-1.html

    match之前就有的 include后面我试一下,我也很少用
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    3

    帖子

    20

    积分

    助理工程师

    Rank: 1

    积分
    20
    发表于 2021-1-11 20:39:04 | 显示全部楼层
    首先谢谢楼主.其次某度网盘好像不管用,试了好几次。:'(
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    昨天 00:09
  • 签到天数: 67 天

    [LV.6]常住居民II

    150

    主题

    2001

    帖子

    2133

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    2133

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

    发表于 2021-1-12 10:53:03 | 显示全部楼层
    Forward 发表于 2021-1-11 20:39
    首先谢谢楼主.其次某度网盘好像不管用,试了好几次。

    看看你怎么写的?
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    3

    帖子

    20

    积分

    助理工程师

    Rank: 1

    积分
    20
    发表于 2021-1-12 21:43:55 | 显示全部楼层

    // @match        https://pan.baidu.com/
    // @grant        none
    // ==/UserScript==

    (function() {
        'use strict';

        // Your code here...
       if(document.querySelector("#TANGRAM__PSP_4__userName")==null){
        //没有找到表示登录了,不再执行后续代码
       return;
       }
        //未登录,执行登录代码
        document.querySelector('#TANGRAM__PSP_4__userName').value='xxxxx';
        document.querySelector('#TANGRAM__PSP_4__password').value='xxxx';
        document.querySelector('#TANGRAM__PSP_4__submit').click();

    })();
    已有1人评分 理由
    王一之 + 1 10楼markdown写的,不知道有没有通知到.

    查看全部评分 总评分: +1 

    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    昨天 00:09
  • 签到天数: 67 天

    [LV.6]常住居民II

    150

    主题

    2001

    帖子

    2133

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    2133

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

    发表于 2021-1-12 22:17:19 | 显示全部楼层

    代码没有问题,但是这个编辑框在脚本执行的时候它并没有加载出来

    百度网盘的这个登录框应该是页面加载完成后才渲染的,这个时候你的代码已经执行完成了,执行的时候登录框没有加载出来,所以没有效果.

    可以打一个log看一下:console.log(document.querySelector("#TANGRAM__PSP_4__userName"));它的输出是null

    简单操作就可以试着增加一个延迟,像下面这样

    // @match        https://pan.baidu.com/
    // @grant        none
    // ==/UserScript==
    
    (function() {
        'use strict';
        // Your code here...
        window.addEventListener("load", function(event) {
            console.log(document.querySelector("#TANGRAM__PSP_4__userName"));
            setTimeout(function(){//2s后再进行登录
                if(document.querySelector("#TANGRAM__PSP_4__userName")==null){
                    //没有找到表示登录了,不再执行后续代码
                    return;
                }
                //未登录,执行登录代码
                document.querySelector('#TANGRAM__PSP_4__userName').value='xxxxx';
                document.querySelector('#TANGRAM__PSP_4__password').value='xxxx';
                document.querySelector('#TANGRAM__PSP_4__submit').click();
            },2000);
        });
    
    })();

    也有其它方案,例如在它父级增减监听事件等...不过感觉会更麻烦,不如直接粗暴的增加延迟.(虽然可以更优雅)

    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

    发表回复

    本版积分规则

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