前端小技巧|关掉某视频解析网站上的广告

关注它，不迷路。

本文章中所有内容仅供学习交流，不可用于任何商业用途和非法用途，否则后果自负，如有侵权，请联系作者立即删除！

1. 前言

没钱充视频网站的会员了，只有去视频解析类的网站上看，发现了一个还不错的网站:

'aHR0cHM6Ly93d3cuNXlqdS5jb20v'
  

比较烦人的就是，每次打开新的页面，左右两边都有广告，右下角还有个弹窗。

作为一个对前端还算有一丁点了解的人，这种广告怎么能忍，得想个办法干掉才行。

2. 分析元素

打开网站后，再按下F12，打开调试窗口，点击左上角的箭头:

然后再将鼠标移动到 广告 中间并点击，发现定位到这里:

它这个元素是在 id为 coupletleft 的 div 下面，控制台输入代码将其隐藏试试:

document.getElementById('coupletleft').style.display = "none";//隐藏
  

回车后，发现左边的广告已经被隐藏了:

既然这样可以隐藏，那其他的广告一样进行隐藏即可。

       document.getElementById('coupletright').style.display = "none";//隐藏
       document.getElementById('hbidbox').style.display = "none";//隐藏
       document.getElementById('HMRichBox').style.display = "none";//隐藏
   
  

问题又来了，每个页面都有广告，但是不可能每个页面都去在控制台输入这些代码来隐藏广告，因此，自动执行非常重要。这里推荐油猴注入的方法:

3. 油猴注入代码

由于这些代码是在页面加载完毕后才加载的，因此，需要使用一个定时器来执行它，完整代码如下:

       // ==UserScript==
       // @name Hide AD
       // @namespace http://tampermonkey.net/
       // @version 0.1
       // @description try to take over the world!
       // @author 悦来客栈的老板
       // @match https://www.5yju.com/*
       // @grant none
       // @run-at document-end
       // ==/UserScript==
       (function() {
          setTimeout(function() {
              let id = document.getElementById('coupletleft');
              if (id != null) {
                   id.style.display = "none";
                  //隐藏
               }
               id = document.getElementById('coupletright');
              if (id != null) {
                   id.style.display = "none";
                  //隐藏
               }
               id = document.getElementById('hbidbox');
              if (id != null) {
                   id.style.display = "none";
                  //隐藏
               }
               id = document.getElementById('HMRichBox');
              if (id != null) {
                   id.style.display = "none";
                  //隐藏
               }
           }, 500);
       }
       )();
   
  

   
  
  

注入后，再刷新，发现可以关掉广告了。这下清爽了。

遇到其他的网站，只需要找到广告所在div即可。

今天的文章就分享到这里，后续分享更多的技巧，敬请期待。