当前位置:首页 > 休闲

淘宝电脑端屏蔽代码

淘宝电脑端网页的淘宝屏蔽代码,说白了就是电脑端屏一段CSS或者JS,塞进浏览器扩展、蔽代油猴脚本或者广告拦截插件里,淘宝让淘宝页面上的电脑端屏某些元素直接消失。不是蔽代黑客技术,本质就是淘宝前端层面的“眼不见为净”。

我最早动这个念头,电脑端屏是蔽代因为家里老人用电脑逛淘宝,老是淘宝点进“猜你喜欢”里的推广位,买回一堆用不上的电脑端屏东西。淘宝电脑端首页的蔽代信息密度太高了,左侧导航、淘宝顶部横幅、电脑端屏右侧悬浮、蔽代底部推荐,真正想找的搜索框反而被淹没。于是我开始翻淘宝的页面结构,找那些推广模块的class名和id。

常见屏蔽目标与对应选择器

淘宝电脑端首页的推广位,class名经常变,但有几个相对稳定的钩子。比如顶部横幅广告,通常挂在#J_SiteNavBd或者.site-nav-bd下面。右侧的“淘宝头条”和“猜你喜欢”入口,早期是#J_TbHead和.tb-head,后来改成了.module-float和#J_ModuleFloat。搜索框下方的热词推荐,选择器是.hot-query或#J_HotQuery。

详情页里的“看了又看”“猜你喜欢”“掌柜热卖”,对应的class分别是.recommend、.guess-like、.shop-hot。这些模块的父容器通常带data-spm属性,值以2014或1997525045开头,用属性选择器[data-spm^="2014"]能一次干掉一批。

购物车页面底部的“凑单推荐”和“精选好货”,选择器是.cart-recommend和#J_CartRecommend。订单列表页的“买了又买”,挂在.order-recommend下面。

一段能直接用的CSS

下面这段代码,我用了大半年,基本覆盖了电脑端淘宝的主要干扰模块。把它放进Stylus或者任何CSS注入工具里就行:

/* 首页顶部横幅 */ #J_SiteNavBd, .site-nav-bd {  display: none !important; } /* 右侧悬浮 */ .module-float, #J_ModuleFloat {  display: none !important; } /* 热词推荐 */ .hot-query, #J_HotQuery {  display: none !important; } /* 猜你喜欢 */ .guess-like, .recommend {  display: none !important; } /* 详情页看了又看 */ [data-spm^="2014"] {  display: none !important; } /* 购物车凑单 */ .cart-recommend, #J_CartRecommend {  display: none !important; } /* 订单页买了又买 */ .order-recommend {  display: none !important; } 

注意display: none后面必须加!important,淘宝自己的样式权重不低,不加会被覆盖。另外有些模块是异步加载的,页面滚到底部才渲染出来,CSS注入要配合MutationObserver或者油猴脚本的@run-at document-end,否则第一次加载时可能漏掉。

一个容易被忽略的细节

淘宝的class名带哈希后缀,比如.recommend--1a2b3这种。直接写.recommend有时候匹配不到,因为实际class是recommend--xxxxx。解决办法是用属性选择器[class*="recommend"],匹配所有class里包含“recommend”的元素。代价是可能误伤,比如某个正常模块的class里恰好也有这个词。我自己的做法是先用开发者工具确认当前页面实际渲染出来的class,再写精确匹配。

还有一点,淘宝会检测页面高度和滚动行为。如果你把太多模块display: none,页面变得很短,它可能触发“加载更多”的逻辑,反而把推荐内容重新塞进来。这时候需要额外屏蔽.pagination或者#J_Loading这类加载触发器。

JS方案与风险

纯CSS只能隐藏,DOM节点还在,占内存。用JS直接remove()更彻底,但风险也大。淘宝的React组件树依赖这些节点做状态管理,删掉之后可能报错,导致搜索框失灵或者购物车按钮点不动。我试过用element.remove()删“猜你喜欢”,结果详情页的“加入购物车”按钮变成了灰色。后来改成visibility: hidden加height: 0,既看不见又不破坏DOM结构,稳得多。

最后提醒一句,这类屏蔽代码只影响你自己浏览器里的显示效果,不会修改淘宝服务器上的任何数据。账号安全、交易流程都不受影响。但淘宝前端改版频繁,今天能用的选择器,下个月可能就失效了。定期打开开发者工具复查一下,比到处找“永久有效”的代码靠谱。

分享到: