声明

本教程只是技术分享, 创业不易, 咱们还是应该相互体谅.

思路分析

文章的左侧栏有两个广告位, 今天的脚本就是要想办法把它们屏蔽掉.

看一下这个广告位对应的源码.

走了个弯路

这个 div 节点居然有 id (见图标识 1), 一开始我的思路是 "定位到这个 div 节点", 把它的属性置为 "none", 代码演示一下:

document.getElementById("OA_holder_1").style.display = "none";

写完后, 在 chrome 控制台调试了一下, 结果发现这个 div 节点广告没了, 但是 div 框还在, 然后看到 "图标识2" 的地方, 才意识到前端把这个地方的位置大小给固定了.

成功代码

所以, 我最终的思路是, 找到这个 div 节点的父节点, 然后把那两个广告位移除.

移除后的效果:

附上源码

// ==UserScript==
// @name         segmentfault
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://segmentfault.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    let block = ()=>{
      // 找到父节点
        let parent = document.getElementsByClassName("w-xl-300")[0];
        let childs = parent.childNodes;
        for(let i=0;i<childs.length;i++){
          // 移除两个广告位
            if(i>1){
                parent.removeChild(childs[i]);
            }
        }

    }
    // 打开页面后, 2 秒后对 广告进行 block.
    setTimeout(block, 2000);
})();