您现在的位置是:休闲 >>正文
淘宝电脑端屏蔽代码
休闲83122人已围观
简介淘宝电脑端网页的屏蔽代码,说白了就是一段CSS或者JS,塞进浏览器扩展、油猴脚本或者广告拦截插件里,让淘宝页面上的某些元素直接消失。不是黑客技术,本质就是前端层面的“眼不见为净”。 我最早动这个念头, ...
淘宝电脑端网页的淘宝屏蔽代码,说白了就是电脑端屏一段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结构,稳得多。
最后提醒一句,这类屏蔽代码只影响你自己浏览器里的显示效果,不会修改淘宝服务器上的任何数据。账号安全、交易流程都不受影响。但淘宝前端改版频繁,今天能用的选择器,下个月可能就失效了。定期打开开发者工具复查一下,比到处找“永久有效”的代码靠谱。
Tags:
上一篇:俄罗斯免费网址大家懂的
下一篇:get漫画官方网站进入
相关文章
cp星球官网入口
休闲cp星球官网入口藏在一个极不起眼的二级域名里。我第一次摸到它,是因为朋友发来一串乱码般的短链接,点开之后,浏览器跳转三次,最后落在一个深蓝色背景的页面上——没有logo,没有欢迎动画,只有一行小字:“ ...
【休闲】
阅读更多网站文件
休闲我翻开一个老站点的FTP目录,看到里面躺着几十个后缀为.html的文件,文件名从index.html到about.html,再到一个叫old_news.html的。这些文件不是网站的全部,但它们是网站 ...
【休闲】
阅读更多树莓派内网穿透
休闲树莓派放在家里当服务器,最烦的就是外网访问不了。路由器没有公网IP,运营商给的内网地址像一堵墙,把SSH、Web服务、甚至一个简单的Minecraft服务器全锁死在局域网里。我试过改端口映射,折腾过D ...
【休闲】
阅读更多