淘宝电脑端屏蔽代码
淘宝电脑端网页的淘宝屏蔽代码,说白了就是电脑端屏一段CSS或者JS,塞进浏览器扩展、蔽代油猴脚本或者广告拦截插件里,淘宝让淘宝页面上的电脑端屏某些元素直接消失。不是蔽代黑客技术,本质就是淘宝前端层面的“眼不见为净”。 我最早动这个念头,电脑端屏是蔽代因为家里老人用电脑逛淘宝,老是淘宝点进“猜你喜欢”里的推广位,买回一堆用不上的电脑端屏东西。淘宝电脑端首页的蔽代信息密度太高了,左侧导航、淘宝顶部横幅、电脑端屏右侧悬浮、蔽代底部推荐,真正想找的搜索框反而被淹没。于是我开始翻淘宝的页面结构,找那些推广模块的class名和id。 淘宝电脑端首页的推广位,class名经常变,但有几个相对稳定的钩子。比如顶部横幅广告,通常挂在 详情页里的“看了又看”“猜你喜欢”“掌柜热卖”,对应的class分别是 购物车页面底部的“凑单推荐”和“精选好货”,选择器是 下面这段代码,我用了大半年,基本覆盖了电脑端淘宝的主要干扰模块。把它放进Stylus或者任何CSS注入工具里就行: 注意 淘宝的class名带哈希后缀,比如 还有一点,淘宝会检测页面高度和滚动行为。如果你把太多模块 纯CSS只能隐藏,DOM节点还在,占内存。用JS直接 最后提醒一句,这类屏蔽代码只影响你自己浏览器里的显示效果,不会修改淘宝服务器上的任何数据。账号安全、交易流程都不受影响。但淘宝前端改版频繁,今天能用的选择器,下个月可能就失效了。定期打开开发者工具复查一下,比到处找“永久有效”的代码靠谱。常见屏蔽目标与对应选择器
#J_SiteNavBd或者.site-nav-bd下面。右侧的“淘宝头条”和“猜你喜欢”入口,早期是#J_TbHead和.tb-head,后来改成了.module-float和#J_ModuleFloat。搜索框下方的热词推荐,选择器是.hot-query或#J_HotQuery。.recommend、.guess-like、.shop-hot。这些模块的父容器通常带data-spm属性,值以2014或1997525045开头,用属性选择器[data-spm^="2014"]能一次干掉一批。.cart-recommend和#J_CartRecommend。订单列表页的“买了又买”,挂在.order-recommend下面。一段能直接用的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,否则第一次加载时可能漏掉。一个容易被忽略的细节
.recommend--1a2b3这种。直接写.recommend有时候匹配不到,因为实际class是recommend--xxxxx。解决办法是用属性选择器[class*="recommend"],匹配所有class里包含“recommend”的元素。代价是可能误伤,比如某个正常模块的class里恰好也有这个词。我自己的做法是先用开发者工具确认当前页面实际渲染出来的class,再写精确匹配。display: none,页面变得很短,它可能触发“加载更多”的逻辑,反而把推荐内容重新塞进来。这时候需要额外屏蔽.pagination或者#J_Loading这类加载触发器。JS方案与风险
remove()更彻底,但风险也大。淘宝的React组件树依赖这些节点做状态管理,删掉之后可能报错,导致搜索框失灵或者购物车按钮点不动。我试过用element.remove()删“猜你喜欢”,结果详情页的“加入购物车”按钮变成了灰色。后来改成visibility: hidden加height: 0,既看不见又不破坏DOM结构,稳得多。
-
上一篇
-
下一篇
- 最近发表
- 随机阅读
- 搜索
-
- 友情链接
-