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

木羊羽

我想写一个在哔哩哔哩网页自动点击宽屏按钮的油猴脚本，可是失败了，怎么才能在网页加载完毕后使用脚本，我用了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
                }
            }
        }
};
```

李恒道

我们大概定位到元素

这里可以看到存在两个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
[md]我们大概定位到元素

![图片.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的按钮插入里我记得也用过