求助油猴脚本如何哔哩哔哩自动点击宽屏按钮
本帖最后由 木羊羽 于 2021-2-17 14:58 编辑我想写一个在哔哩哔哩网页自动点击宽屏按钮的油猴脚本,可是失败了,怎么才能在网页加载完毕后使用脚本,我用了window.onload好像也不行,使用while循环直接卡死,求大佬啊
```
// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @descriptiontry 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
}
}
}
};
```
我们大概定位到元素
![图片.png](data/attachment/forum/202102/17/152912ipplhqgxsgy5gddy.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.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
李恒道 发表于 2021-2-17 15:37
我们大概定位到元素
![图片.png](data/attachment/forum/202102/17/152912ipplhqgxsgy5gddy.png?image ...
感谢大佬 成功解决 嘿嘿 木羊羽 发表于 2021-2-17 18:00
感谢大佬 成功解决 嘿嘿
小问题,哥哥有不会可以再提问,另外有小作品可以论坛发一下哦 监控dom插入这个怎么操作呢 神仙不在 发表于 2021-2-18 09:49
监控dom插入这个怎么操作呢
插入节点
插入节点时涉及到DOMNodeInserted事件、DOMNodeInsertedIntoDocument事件及DOMSubtreeModified事件,下面将详细介绍
DOMNodeInserted
在使用appendChild()、replaceChild()或insertBefore()向DOM中插入节点时,首先触发DOMNodeInserted事件
这个事件的目标是被插入的节点,而event.relatedNode属性中包含一个对父节点的引用
在这个事件触发时,节点已经被插入到了新的父节点中。这个事件是冒泡的,因此可以在DOM的各个层次上处理它 神仙不在 发表于 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>
``` 神仙不在 发表于 2021-2-18 09:49
监控dom插入这个怎么操作呢
这个在bilibili的按钮插入里我记得也用过
页:
[1]