上一主题 下一主题
返回列表 发新帖

求助油猴脚本如何哔哩哔哩自动点击宽屏按钮

[复制链接]

2

主题

5

帖子

18

积分

新手上路

Rank: 1

积分
18
发表于 2021-2-17 14:55:19 | 显示全部楼层 | 阅读模式
本帖最后由 木羊羽 于 2021-2-17 14:58 编辑

我想写一个在哔哩哔哩网页自动点击宽屏按钮的油猴脚本,可是失败了,怎么才能在网页加载完毕后使用脚本,我用了window.onload好像也不行,使用while循环直接卡死,求大佬啊


```
// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.bilibili.com/video/*
// @grant        none
// ==/UserScript==
window.onload = function() {
        console.log('脚本开始运行')
        while (1){
            console.log('进入循环')
            if (document.readyState === "complete") {
                console.log('判断网页加载完成')
                let widescreen = document.querySelector("#bilibiliPlayer > div.bilibili-player-area.video-state-blackside.video-state-pause.progress-shadow-show > div.bilibili-player-video-wrap > div.bilibili-player-video-control-wrap > div.bilibili-player-video-control > div.bilibili-player-video-control-bottom > div.bilibili-player-video-control-bottom-right > div.bilibili-player-video-btn.bilibili-player-video-btn-widescreen")
                let widescreen_closed = document.querySelector("#bilibiliPlayer > div.bilibili-player-area.video-state-blackside.video-state-pause.progress-shadow-show > div.bilibili-player-video-wrap > div.bilibili-player-video-control-wrap > div.bilibili-player-video-control > div.bilibili-player-video-control-bottom > div.bilibili-player-video-control-bottom-right > div.bilibili-player-video-btn.bilibili-player-video-btn-widescreen.closed")
                if (widescreen_closed==null) {
                    widescreen.click()
                } else {
                    break
                }
            }
        }
};
```

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

62

主题

353

帖子

619

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
619
发表于 2021-2-17 15:37:46 | 显示全部楼层

我们大概定位到元素

图片.png

这里可以看到存在两个button

一个是宽屏模式,一个是退出宽屏

切换一下可以看到是通过class样式控制哪个button显示的

显示宽屏模式是bilibili-player-video-btn bilibili-player-video-btn-widescreen

退出宽屏模式是bilibili-player-video-btn bilibili-player-video-btn-widescreen closed

区别主要是closed

所以使用clsdiv.className.indexOf('closed')==-1来进行区分(获取class名字,判断是否存在closed)

因为window.onload是不好使的,播放器在网页加载之后才进行了某些操作

所以说这时候一般两种方法

1.监控dom插入

2.定时器永远滴神

这里为了比较方便我直接上定时器了

源码可以参考

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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

2

主题

5

帖子

18

积分

新手上路

Rank: 1

积分
18
发表于 2021-2-17 18:00:10 | 显示全部楼层
李恒道 发表于 2021-2-17 15:37
[md]我们大概定位到元素

![图片.png](data/attachment/forum/202102/17/152912ipplhqgxsgy5gddy.png?image ...

感谢大佬 成功解决 嘿嘿
回复

使用道具 举报

62

主题

353

帖子

619

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
619
发表于 2021-2-17 18:52:07 | 显示全部楼层
木羊羽 发表于 2021-2-17 18:00
感谢大佬 成功解决 嘿嘿

小问题,哥哥有不会可以再提问,另外有小作品可以论坛发一下哦
回复

使用道具 举报

0

主题

2

帖子

22

积分

新手上路

Rank: 1

积分
22
发表于 2021-2-18 09:49:21 | 显示全部楼层
监控dom插入这个怎么操作呢
回复

使用道具 举报

62

主题

353

帖子

619

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
619
发表于 2021-2-18 23:47:48 | 显示全部楼层
神仙不在 发表于 2021-2-18 09:49
监控dom插入这个怎么操作呢

插入节点

  插入节点时涉及到DOMNodeInserted事件、DOMNodeInsertedIntoDocument事件及DOMSubtreeModified事件,下面将详细介绍

DOMNodeInserted

  在使用appendChild()、replaceChild()或insertBefore()向DOM中插入节点时,首先触发DOMNodeInserted事件

  这个事件的目标是被插入的节点,而event.relatedNode属性中包含一个对父节点的引用

  在这个事件触发时,节点已经被插入到了新的父节点中。这个事件是冒泡的,因此可以在DOM的各个层次上处理它
回复

使用道具 举报

62

主题

353

帖子

619

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
619
发表于 2021-2-18 23:48:09 | 显示全部楼层
神仙不在 发表于 2021-2-18 09:49
监控dom插入这个怎么操作呢

```
<div id="box" style="height: 30px;width: 100px;">
</div>
<button id="btn">插入节点</button>
<script>
box.addEventListener('DOMNodeInserted',function(e){
    e = e || event;
    e.relatedNode.style.background = 'lightblue';
});
btn.onclick = function(){
    document.body.appendChild(box);
}
</script>
```
回复

使用道具 举报

62

主题

353

帖子

619

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
619
发表于 2021-2-18 23:48:59 | 显示全部楼层
神仙不在 发表于 2021-2-18 09:49
监控dom插入这个怎么操作呢

这个在bilibili的按钮插入里我记得也用过
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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