大部分小站要维持运转，离不开广告收益，域名、主机等费用虽然不高，但很少人愿意长期入不敷出。
可持续的良性生态是：服务方创造内容，服务了用户，同时获得收益。
有一天我访问 阮一峰 的网站的时候，提示：
您使用了广告拦截器，导致本站内容无法显示。
请将 www.ruanyifeng.com 加入白名单，解除广告屏蔽后，刷新页面。谢谢。
原因是我开启了 AdBlocker Ultimate 广告拦截插件，加入白名单刷新后，页面展示正常。一般有较认真写内容的网站，我都会选择允许展示广告，这份坚守并不容易。比如我的这个站点，每写一个文章差不多要消耗 2 个小时，目前已连续亏损三年，没倒闭是已因为还有一份愿意分享的心，目前亏得起。
做网站的时代已经过去，Vivo、华为等手机默认浏览器即开启广告屏蔽，不信去手机专卖店试试，因为我试过了 😅。从这个角度说，微信公众号还是有优势的，公众号的浏览器是微信在掌控！里面各种广告拉满，当然广告多了，会适得其反。
题外话不多说，自己动手来实现一个类似功能。
1function detectAdblock() {
2 try {
3 fetch(
4 new Request(
5 "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
6 {
7 method: "HEAD",
8 mode: "no-cors",
9 }
10 )
11 ).catch((error) => {
12 showNotification();
13 });
14 } catch (e) {
15 // Request failed, likely due to ad blocker
16 showNotification();
17 }
18}
19
20function showNotification() {
21 var sponsor = document.querySelector("#my-content");
22 var prompt = document.createElement("div");
23 prompt.className = "content";
24 prompt.style =
25 "hborder: 1px solid #c6c6c6;border-radius: 4px;background-color: #f5f2f0;padding: 15px; font-size: 14px;";
26 prompt.innerHTML =
27 "<h1>您使用了广告拦截器，导致本站内容无法显示</h1><h2> You are using an ad blocker, which prevents the content of this site from being displayed</h2> <p>创作不易，小站依赖广告维持运转，还请将 <font color='green'><strong>mephisto.cc</strong></font> 加入白名单，解除广告屏蔽后，刷新页面。谢谢🙏</p> <p>Please add <font color='green'><strong>mephisto.cc</strong></font> to the whitelist, unblock the advertising, and refresh the page. Thank you 🙏</p> <img src='/images/unblock-ads.webp'/> <img src='/images/whitelist.webp'/>";
28 sponsor.parentNode.replaceChild(prompt, sponsor);
29}
30
31setTimeout(detectAdblock, 1000);
原理是检测广告链接 HEAD 方法访问是否正常，不正常就把 id 为my-content的内容替换为指定提示信息，提示用户解除广告屏蔽。
有读者会问，这样怎么排除网络异常呢？排除不了，被错杀了，无情又暴力...
这对我来说简单好用可接受，因为读者访问不了广告链接(能访问也不一定展示广告，广告联盟决定的)，也就是说能搞钱的概率为零，且绝大部分用户都是可以访问这个链接的，国内还没屏蔽。看不了的用户，会去访问别的站点，没毛病。用户能修复自己的网络问题，自然能访问。万一这个链接本身挂了呢？概率微乎其微，毕竟人家市值万亿美元，超有本事跨国公司，不用操心。它都挂了，损失点有什么关系，这样想，即可心安理得。 退一步讲，这个检测条件可以不断改动，优化成自己想要的模样。
其实每个广告屏蔽插件的逻辑不一，加入了白名单，还是访问不了，这种状况也是未考虑的，有待反馈优化。
我的第一版提示信息只有中文文字信息，后面加了英文翻译。毕竟我每个文章都有英文版本，繁体用户就凑合看简体文字信息了。
光有文字还是不够的，昨天有个读者给我发了个问号 ❓，估计不会加白名单(或者说那个屏蔽软件类似功能不太好查找、效果不同），看不到内容有点不高兴 😭！
不怪用户，只怪自己，于是添加了图片操作指引。
别的插件怎么操作呢？这也是个问题，等赚钱了 500 万再说 😊。
我甚至还用 obs 录屏，准备提供视频或者 gif，等用户反馈多了再说。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。