jQuery实现一键关闭网页广告的实用代码教程从入门到精通帮助开发者快速掌握广告屏蔽技术提升网站性能和用户满意度改善整体浏览体验

引言：网页广告的挑战与解决方案

在当今互联网时代，网页广告已成为网站运营的重要收入来源，但过多或不当的广告展示会严重影响用户体验。弹窗广告、自动播放视频广告、覆盖内容的全屏广告等不仅会降低网站性能，还会导致用户流失。本文将详细介绍如何使用jQuery实现一键关闭网页广告的功能，帮助开发者在维持广告收入的同时，提升网站性能和用户满意度。

jQuery基础知识回顾

jQuery是一个快速、小型且功能丰富的JavaScript库，它使HTML文档遍历和操作、事件处理、动画和Ajax等事情变得更加简单，具有跨浏览器的兼容性。在我们开始实现广告关闭功能之前，让我们简单回顾一下jQuery的基础知识：

// jQuery基础语法 $(document).ready(function(){ // 代码在这里执行 }); // 或者简写为 $(function(){ // 代码在这里执行 }); // 选择元素 $("selector") // 例如：$(".ad-class") 选择所有class为ad-class的元素 $("#ad-id") // 选择id为ad-id的元素 $("div") // 选择所有div元素 // 事件处理 $("#closeButton").click(function(){ // 点击事件处理代码 }); // 隐藏元素 $(".ad-banner").hide(); $(".ad-popup").fadeOut();

识别网页广告的常见模式

在实现广告关闭功能之前，我们需要先了解如何识别网页上的广告元素。广告通常有以下几种常见模式：

固定位置广告：如页面顶部、底部或侧边栏的广告
弹窗广告：页面加载时或特定操作后弹出的广告窗口
浮动广告：随页面滚动而移动的广告
视频广告：自动播放的视频广告
覆盖层广告：覆盖在内容上方的半透明或全屏广告

以下是使用jQuery识别这些广告的代码示例：

$(document).ready(function(){ // 识别常见广告元素 var commonAdSelectors = [ '.ad', '.ads', '.advertisement', '.banner', '.popup', '.modal', '.overlay', '.sponsored', '.promotion' ]; // 遍历所有可能的选择器 $.each(commonAdSelectors, function(index, selector) { if($(selector).length > 0) { console.log("发现可能的广告元素: " + selector); // 可以在这里添加关闭这些广告的代码 } }); // 识别iframe广告（很多第三方广告通过iframe加载） $('iframe').each(function() { var src = $(this).attr('src'); if(src && (src.indexOf('ad') !== -1 || src.indexOf('banner') !== -1)) { console.log("发现可能的iframe广告: " + src); // 可以在这里添加关闭这些iframe的代码 } }); });

实现一键关闭广告的基础功能

创建关闭按钮

首先，我们需要创建一个关闭按钮，用户可以点击它来关闭广告：

<!-- 在HTML中添加关闭按钮 --> <button id="closeAllAds" class="ad-close-btn">关闭所有广告</button> <!-- 添加CSS样式 --> <style> .ad-close-btn { position: fixed; top: 10px; right: 10px; z-index: 9999; background-color: #ff4444; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .ad-close-btn:hover { background-color: #cc0000; } </style>

基础广告关闭功能

接下来，我们实现基础的广告关闭功能：

$(document).ready(function(){ // 关闭按钮点击事件 $("#closeAllAds").click(function(){ closeAllAds(); }); // 关闭所有广告的函数 function closeAllAds() { // 常见广告选择器 var adSelectors = [ '.ad', '.ads', '.advertisement', '.banner', '.popup', '.modal', '.overlay', '.sponsored', '.promotion', '[class*="ad"]', '[class*="banner"]', '[class*="popup"]', '[id*="ad"]', '[id*="banner"]', '[id*="popup"]' ]; // 遍历所有选择器并隐藏匹配的元素 $.each(adSelectors, function(index, selector) { $(selector).each(function() { // 检查元素是否可见 if($(this).is(':visible')) { // 使用fadeOut效果平滑隐藏广告 $(this).fadeOut(300, function() { $(this).remove(); // 完全移除DOM元素 }); } }); }); // 处理iframe广告 $('iframe').each(function() { var src = $(this).attr('src'); if(src && (src.indexOf('ad') !== -1 || src.indexOf('banner') !== -1 || src.indexOf('doubleclick') !== -1 || src.indexOf('googlesyndication') !== -1)) { $(this).fadeOut(300, function() { $(this).remove(); }); } }); // 显示成功消息 showNotification("已关闭所有检测到的广告！"); } // 显示通知的函数 function showNotification(message) { // 创建通知元素 var notification = $('<div class="ad-notification"></div>').text(message); // 添加样式 notification.css({ 'position': 'fixed', 'bottom': '20px', 'right': '20px', 'background-color': '#4CAF50', 'color': 'white', 'padding': '10px 20px', 'border-radius': '4px', 'z-index': '10000', 'box-shadow': '0 2px 10px rgba(0,0,0,0.2)' }); // 添加到页面 $('body').append(notification); // 3秒后淡出并移除 setTimeout(function() { notification.fadeOut(500, function() { $(this).remove(); }); }, 3000); } });

高级广告屏蔽技术

动态加载广告的检测与关闭

许多网站使用动态加载技术来展示广告，这些广告可能在页面初始加载后一段时间才出现。我们需要使用定时器和MutationObserver来检测并关闭这些动态广告：

$(document).ready(function(){ // 初始关闭广告 closeAllAds(); // 设置定时器，定期检查并关闭新出现的广告 setInterval(function() { closeAllAds(); }, 3000); // 每3秒检查一次 // 使用MutationObserver监听DOM变化 var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.addedNodes && mutation.addedNodes.length > 0) { // 检查新添加的节点是否包含广告 for (var i = 0; i < mutation.addedNodes.length; i++) { var node = mutation.addedNodes[i]; if (isAdNode(node)) { $(node).fadeOut(300, function() { $(this).remove(); }); } } } }); }); // 配置MutationObserver observer.observe(document.body, { childList: true, subtree: true }); // 判断节点是否是广告的函数 function isAdNode(node) { // 如果节点不是元素节点，返回false if (node.nodeType !== 1) return false; // 检查节点的class和id var className = node.className || ''; var id = node.id || ''; // 常见广告关键词 var adKeywords = ['ad', 'banner', 'popup', 'sponsored', 'promotion', 'advertisement']; // 检查class和id是否包含广告关键词 for (var i = 0; i < adKeywords.length; i++) { var keyword = adKeywords[i]; if (className.toLowerCase().indexOf(keyword) !== -1 || id.toLowerCase().indexOf(keyword) !== -1) { return true; } } // 检查是否是iframe广告 if (node.nodeName === 'IFRAME') { var src = node.src || ''; for (var i = 0; i < adKeywords.length; i++) { if (src.toLowerCase().indexOf(adKeywords[i]) !== -1) { return true; } } } return false; } // closeAllAds函数的实现与前面相同 function closeAllAds() { // ... 前面实现的closeAllAds函数代码 ... } });

处理特定类型的广告

不同类型的广告可能需要不同的处理方式。下面我们针对几种常见的广告类型提供专门的关闭方法：

$(document).ready(function(){ // 关闭弹窗广告 function closePopupAds() { // 查找所有可能的弹窗广告 $('.popup, .modal, .overlay, [class*="popup"], [class*="modal"], [class*="overlay"]').each(function() { // 检查是否是弹窗（通常有固定定位和高z-index） var position = $(this).css('position'); var zIndex = $(this).css('z-index'); if ((position === 'fixed' || position === 'absolute') && (zIndex === 'auto' || parseInt(zIndex) > 100)) { $(this).fadeOut(300, function() { $(this).remove(); }); } }); } // 关闭浮动广告 function closeFloatingAds() { // 查找所有可能的浮动广告 $('div, span').each(function() { var position = $(this).css('position'); // 浮动广告通常有固定定位 if (position === 'fixed') { // 检查尺寸和位置，避免误判 var width = $(this).width(); var height = $(this).height(); var top = $(this).offset().top; var left = $(this).offset().left; // 如果元素在页面边缘且有合理的尺寸，可能是浮动广告 if ((top < 50 || top > $(window).height() - 50 || left < 50 || left > $(window).width() - 50) && (width > 50 && width < 400 && height > 20 && height < 400)) { $(this).fadeOut(300, function() { $(this).remove(); }); } } }); } // 关闭视频广告 function closeVideoAds() { // 查找所有视频元素 $('video, iframe').each(function() { var isVideo = this.nodeName === 'VIDEO'; var isIframe = this.nodeName === 'IFRAME'; if (isVideo) { // 检查视频是否自动播放 if ($(this).attr('autoplay') !== undefined) { $(this).fadeOut(300, function() { $(this).remove(); }); } } else if (isIframe) { // 检查iframe是否包含视频广告（如YouTube广告） var src = $(this).attr('src') || ''; if (src.indexOf('youtube') !== -1 && src.indexOf('ad') !== -1) { $(this).fadeOut(300, function() { $(this).remove(); }); } } }); } // 综合关闭所有广告的函数 function closeAllAds() { closePopupAds(); closeFloatingAds(); closeVideoAds(); // 显示通知 showNotification("已关闭所有检测到的广告！"); } // 绑定关闭按钮点击事件 $("#closeAllAds").click(function(){ closeAllAds(); }); // 定期检查并关闭广告 setInterval(closeAllAds, 5000); // showNotification函数的实现与前面相同 function showNotification(message) { // ... 前面实现的showNotification函数代码 ... } });

提升网站性能的策略

关闭广告不仅可以改善用户体验，还可以显著提升网站性能。以下是一些额外的策略，可以进一步提升网站性能：

1. 预加载广告关闭功能

// 在页面加载早期执行广告关闭代码 (function() { // 创建一个立即执行的函数表达式，在DOM解析前运行 // 简单的DOM准备就绪函数 function domReady(callback) { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', callback); } else { callback(); } } // 尽早添加关闭按钮 function addCloseButton() { var closeBtn = document.createElement('button'); closeBtn.id = 'closeAllAds'; closeBtn.className = 'ad-close-btn'; closeBtn.textContent = '关闭所有广告'; // 添加基本样式 closeBtn.style.cssText = ` position: fixed; top: 10px; right: 10px; z-index: 9999; background-color: #ff4444; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2); `; // 添加点击事件 closeBtn.addEventListener('click', function() { // 稍后实现closeAllAds函数 if (typeof closeAllAds === 'function') { closeAllAds(); } }); document.body.appendChild(closeBtn); } // 尽早执行 domReady(addCloseButton); })();

2. 延迟加载非关键资源

$(document).ready(function(){ // 延迟加载图片和其他资源 function lazyLoadImages() { // 查找所有带有data-src属性的图片 $('img[data-src]').each(function() { var img = $(this); var src = img.data('src'); // 使用Intersection Observer API检测元素是否在视口中 if ('IntersectionObserver' in window) { var observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { img.attr('src', src); img.removeAttr('data-src'); observer.unobserve(entry.target); } }); }); observer.observe(img[0]); } else { // 回退方案：简单的延迟加载 setTimeout(function() { img.attr('src', src); img.removeAttr('data-src'); }, 1000); } }); } // 执行延迟加载 lazyLoadImages(); });

3. 优化广告关闭功能的性能

$(document).ready(function(){ // 使用节流函数限制函数执行频率 function throttle(func, delay) { var lastCall = 0; return function() { var now = new Date().getTime(); if (now - lastCall < delay) { return; } lastCall = now; return func.apply(this, arguments); }; } // 使用防抖函数延迟函数执行 function debounce(func, delay) { var timeout; return function() { var context = this; var args = arguments; clearTimeout(timeout); timeout = setTimeout(function() { func.apply(context, args); }, delay); }; } // 优化后的广告关闭函数 var optimizedCloseAllAds = throttle(function() { // 实现与前面相同的closeAllAds函数逻辑 console.log("执行优化后的广告关闭函数"); // ... closeAllAds函数代码 ... }, 1000); // 最多每秒执行一次 // 绑定关闭按钮点击事件 $("#closeAllAds").click(optimizedCloseAllAds); // 使用优化的函数定期检查广告 setInterval(optimizedCloseAllAds, 5000); });

改善用户体验的方法

1. 提供用户友好的通知

$(document).ready(function(){ // 改进的通知系统 function showNotification(message, type = 'success', duration = 3000) { // 创建通知元素 var notification = $('<div class="ad-notification"></div>').text(message); // 根据类型设置不同的样式 var bgColor = type === 'success' ? '#4CAF50' : type === 'warning' ? '#ff9800' : type === 'error' ? '#f44336' : '#2196F3'; // 添加样式 notification.css({ 'position': 'fixed', 'bottom': '20px', 'right': '20px', 'background-color': bgColor, 'color': 'white', 'padding': '12px 20px', 'border-radius': '4px', 'z-index': '10000', 'box-shadow': '0 2px 10px rgba(0,0,0,0.2)', 'font-family': 'Arial, sans-serif', 'font-size': '14px', 'max-width': '300px', 'opacity': '0', 'transform': 'translateY(20px)', 'transition': 'opacity 0.3s ease, transform 0.3s ease' }); // 添加到页面 $('body').append(notification); // 触发重排以应用过渡效果 notification[0].offsetHeight; // 显示通知 notification.css({ 'opacity': '1', 'transform': 'translateY(0)' }); // 添加关闭按钮 var closeBtn = $('<span class="notification-close">&times;</span>'); closeBtn.css({ 'margin-left': '15px', 'cursor': 'pointer', 'font-size': '18px', 'line-height': '1' }); closeBtn.click(function() { removeNotification(notification); }); notification.append(closeBtn); // 自动移除通知 setTimeout(function() { removeNotification(notification); }, duration); } // 移除通知的函数 function removeNotification(notification) { notification.css({ 'opacity': '0', 'transform': 'translateY(20px)' }); setTimeout(function() { notification.remove(); }, 300); } // 使用示例 $("#closeAllAds").click(function() { closeAllAds(); showNotification("已关闭所有检测到的广告！", "success"); }); });

2. 添加统计功能

$(document).ready(function(){ // 广告统计对象 var adStats = { totalClosed: 0, byType: { popup: 0, floating: 0, video: 0, banner: 0, other: 0 }, sessionStartTime: new Date(), init: function() { // 从localStorage加载之前的统计数据 var savedStats = localStorage.getItem('adBlockerStats'); if (savedStats) { var parsed = JSON.parse(savedStats); this.totalClosed = parsed.totalClosed || 0; this.byType = parsed.byType || this.byType; } }, save: function() { // 保存统计数据到localStorage localStorage.setItem('adBlockerStats', JSON.stringify({ totalClosed: this.totalClosed, byType: this.byType })); }, addClosedAd: function(type) { this.totalClosed++; if (this.byType[type] !== undefined) { this.byType[type]++; } else { this.byType.other++; } this.save(); }, getSessionDuration: function() { var now = new Date(); return Math.floor((now - this.sessionStartTime) / 1000); // 返回秒数 } }; // 初始化统计数据 adStats.init(); // 更新closeAllAds函数以包含统计 function closeAllAds() { var closedCount = 0; // 关闭弹窗广告 $('.popup, .modal, .overlay, [class*="popup"], [class*="modal"], [class*="overlay"]').each(function() { if ($(this).is(':visible')) { $(this).fadeOut(300, function() { $(this).remove(); }); closedCount++; adStats.addClosedAd('popup'); } }); // 关闭浮动广告 $('div[style*="position: fixed"], div[style*="position: absolute"]').each(function() { var width = $(this).width(); var height = $(this).height(); if (width > 50 && width < 400 && height > 20 && height < 400) { $(this).fadeOut(300, function() { $(this).remove(); }); closedCount++; adStats.addClosedAd('floating'); } }); // 关闭视频广告 $('video[autoplay], iframe[src*="ad"]').each(function() { $(this).fadeOut(300, function() { $(this).remove(); }); closedCount++; adStats.addClosedAd('video'); }); // 关闭横幅广告 $('.ad, .ads, .banner, .advertisement, [class*="ad"], [class*="banner"]').each(function() { if ($(this).is(':visible')) { $(this).fadeOut(300, function() { $(this).remove(); }); closedCount++; adStats.addClosedAd('banner'); } }); // 显示统计信息 if (closedCount > 0) { showNotification(`已关闭 ${closedCount} 个广告！本次会话总计关闭 ${adStats.totalClosed} 个广告。`, "success"); } else { showNotification("未检测到新的广告。", "info"); } } // 添加统计面板 function showStatsPanel() { var panel = $('<div id="adStatsPanel"></div>'); // 计算会话时长 var sessionDuration = adStats.getSessionDuration(); var minutes = Math.floor(sessionDuration / 60); var seconds = sessionDuration % 60; // 构建统计信息HTML var statsHtml = ` <h3>广告屏蔽统计</h3> <p>本次会话关闭广告总数: <strong>${adStats.totalClosed}</strong></p> <p>会话时长: <strong>${minutes}分${seconds}秒</strong></p> <h4>按类型分类:</h4> <ul> <li>弹窗广告: ${adStats.byType.popup}</li> <li>浮动广告: ${adStats.byType.floating}</li> <li>视频广告: ${adStats.byType.video}</li> <li>横幅广告: ${adStats.byType.banner}</li> <li>其他: ${adStats.byType.other}</li> </ul> <button id="closeStatsPanel">关闭</button> <button id="resetStats">重置统计</button> `; panel.html(statsHtml); // 添加样式 panel.css({ 'position': 'fixed', 'top': '50%', 'left': '50%', 'transform': 'translate(-50%, -50%)', 'background-color': 'white', 'padding': '20px', 'border-radius': '8px', 'box-shadow': '0 4px 20px rgba(0,0,0,0.3)', 'z-index': '10001', 'max-width': '400px', 'width': '90%' }); // 添加到页面 $('body').append(panel); // 绑定关闭按钮事件 $('#closeStatsPanel').click(function() { panel.fadeOut(300, function() { $(this).remove(); }); }); // 绑定重置按钮事件 $('#resetStats').click(function() { if (confirm('确定要重置所有统计数据吗？')) { adStats.totalClosed = 0; adStats.byType = { popup: 0, floating: 0, video: 0, banner: 0, other: 0 }; adStats.save(); // 更新面板显示 panel.find('strong').first().text('0'); panel.find('ul li').each(function() { $(this).text($(this).text().replace(/d+$/, '0')); }); showNotification("统计数据已重置！", "success"); } }); } // 添加统计按钮 var statsBtn = $('<button id="showStatsBtn">统计</button>'); statsBtn.css({ 'position': 'fixed', 'top': '10px', 'right': '160px', 'z-index': '9999', 'background-color': '#2196F3', 'color': 'white', 'border': 'none', 'padding': '8px 15px', 'border-radius': '4px', 'cursor': 'pointer', 'font-weight': 'bold', 'box-shadow': '0 2px 5px rgba(0,0,0,0.2)' }); statsBtn.click(showStatsPanel); $('body').append(statsBtn); });

实际应用案例

案例1：新闻网站的广告屏蔽

新闻网站通常包含大量广告，包括横幅广告、弹窗广告和视频广告。以下是一个针对新闻网站的广告屏蔽解决方案：

$(document).ready(function(){ // 新闻网站特定的广告选择器 var newsSiteAdSelectors = [ '.ad-container', '.ad-wrapper', '.ad-slot', '.teads-ad', '.outbrain-ad', '.taboola-ad', '.advertisement-label', '.sponsored-content', '.google-adsense', '.dfp-ad' ]; // 新闻网站特定的广告关闭函数 function closeNewsSiteAds() { var closedCount = 0; // 使用特定选择器关闭广告 $.each(newsSiteAdSelectors, function(index, selector) { $(selector).each(function() { if ($(this).is(':visible')) { $(this).fadeOut(300, function() { $(this).remove(); }); closedCount++; } }); }); // 处理新闻网站常见的特定广告格式 // 1. 处理taboola和outbrain推荐内容（通常伪装成相关文章） $('.taboola-feed, .outbrain-feed, .recommendations').each(function() { if ($(this).find('[data-ob-mark], [data-taboola]').length > 0) { $(this).fadeOut(300, function() { $(this).remove(); }); closedCount++; } }); // 2. 处理文章内嵌广告 $('p > a > img').each(function() { var parentLink = $(this).parent('a'); var href = parentLink.attr('href') || ''; // 检查链接是否指向广告商 if (href.indexOf('ad') !== -1 || href.indexOf('sponsored') !== -1 || href.indexOf('promotion') !== -1) { parentLink.fadeOut(300, function() { $(this).remove(); }); closedCount++; } }); // 显示结果 if (closedCount > 0) { showNotification(`已关闭 ${closedCount} 个新闻网站广告！`, "success"); } } // 绑定关闭按钮 $("#closeAllAds").click(closeNewsSiteAds); // 定期检查并关闭广告 setInterval(closeNewsSiteAds, 5000); // 使用MutationObserver监听动态加载的广告 var observer = new MutationObserver(function(mutations) { var hasNewAds = false; mutations.forEach(function(mutation) { if (mutation.addedNodes && mutation.addedNodes.length > 0) { for (var i = 0; i < mutation.addedNodes.length; i++) { var node = mutation.addedNodes[i]; // 检查新添加的节点是否是广告 for (var j = 0; j < newsSiteAdSelectors.length; j++) { if ($(node).is(newsSiteAdSelectors[j]) || $(node).find(newsSiteAdSelectors[j]).length > 0) { hasNewAds = true; break; } } if (hasNewAds) break; } } }); // 如果发现新广告，延迟一下再关闭（确保广告完全加载） if (hasNewAds) { setTimeout(closeNewsSiteAds, 1000); } }); // 配置并启动观察器 observer.observe(document.body, { childList: true, subtree: true }); });

案例2：电商网站的广告屏蔽

电商网站通常有产品推荐广告、促销弹窗和会员广告等。以下是一个针对电商网站的广告屏蔽解决方案：

$(document).ready(function(){ // 电商网站特定的广告选择器 var ecommerceAdSelectors = [ '.promo-banner', '.special-offer', '.deal-of-the-day', '.membership-ad', .newsletter-popup', .app-install-banner, .recommendation-ad', .sponsored-product, .promotion-modal ]; // 电商网站特定的广告关闭函数 function closeEcommerceAds() { var closedCount = 0; // 使用特定选择器关闭广告 $.each(ecommerceAdSelectors, function(index, selector) { $(selector).each(function() { if ($(this).is(':visible')) { $(this).fadeOut(300, function() { $(this).remove(); }); closedCount++; } }); }); // 处理电商网站常见的特定广告格式 // 1. 处理会员订阅弹窗 $('.modal, .popup, .dialog').each(function() { var modalContent = $(this).text().toLowerCase(); if (modalContent.indexOf('member') !== -1 || modalContent.indexOf('subscribe') !== -1 || modalContent.indexOf('newsletter') !== -1 || modalContent.indexOf('vip') !== -1) { $(this).fadeOut(300, function() { $(this).remove(); }); closedCount++; } }); // 2. 处理应用安装横幅 $('div').each(function() { var divText = $(this).text().toLowerCase(); if ((divText.indexOf('app') !== -1 || divText.indexOf('application') !== -1) && (divText.indexOf('install') !== -1 || divText.indexOf('download') !== -1) && $(this).css('position') === 'fixed') { $(this).fadeOut(300, function() { $(this).remove(); }); closedCount++; } }); // 3. 处理产品推荐广告（通常有"sponsored"标签） $('.product-item, .item-card').each(function() { if ($(this).find('.sponsored, .ad, .promotion').length > 0) { $(this).fadeOut(300, function() { $(this).remove(); }); closedCount++; } }); // 显示结果 if (closedCount > 0) { showNotification(`已关闭 ${closedCount} 个电商网站广告！`, "success"); } } // 绑定关闭按钮 $("#closeAllAds").click(closeEcommerceAds); // 定期检查并关闭广告 setInterval(closeEcommerceAds, 5000); // 页面滚动时检查广告（某些电商网站在滚动时加载广告） var scrollTimeout; $(window).scroll(function() { clearTimeout(scrollTimeout); scrollTimeout = setTimeout(closeEcommerceAds, 500); }); });

案例3：视频网站的广告屏蔽

视频网站通常有前贴片广告、暂停广告和覆盖广告等。以下是一个针对视频网站的广告屏蔽解决方案：

$(document).ready(function(){ // 视频网站特定的广告关闭函数 function closeVideoSiteAds() { var closedCount = 0; // 1. 处理前贴片广告 $('.preroll-ad, .pre-roll, .ad-before-video').each(function() { $(this).fadeOut(300, function() { $(this).remove(); }); closedCount++; // 尝试自动播放主视频 var mainVideo = $('video').not('[class*="ad"]').not('[id*="ad"]').first(); if (mainVideo.length > 0 && mainVideo[0].paused) { mainVideo[0].play(); } }); // 2. 处理暂停广告 $('.pause-ad, .ad-on-pause, .overlay-ad').each(function() { $(this).fadeOut(300, function() { $(this).remove(); }); closedCount++; }); // 3. 处理视频播放器中的广告覆盖层 $('.video-player, .player-container').each(function() { var player = $(this); // 查找广告覆盖层 player.find('.ad-overlay, .ad-layer, .advertisement').each(function() { $(this).fadeOut(300, function() { $(this).remove(); }); closedCount++; }); // 查找并跳过广告 var skipButton = player.find('.skip-ad, .skip-button, [aria-label*="skip"]'); if (skipButton.length > 0) { skipButton.click(); closedCount++; } // 查找静音按钮并取消静音（有些广告通过强制静音来干扰） var muteButton = player.find('.mute-button, [aria-label*="mute"], .volume-icon'); if (muteButton.length > 0 && muteButton.hasClass('muted')) { muteButton.click(); } }); // 4. 处理侧边栏和相关视频中的广告 $('.sidebar-ad, .recommended-ad, .suggested-video-ad').each(function() { $(this).fadeOut(300, function() { $(this).remove(); }); closedCount++; }); // 5. 处理iframe广告（很多视频广告通过iframe加载） $('iframe').each(function() { var src = $(this).attr('src') || ''; if (src.indexOf('ad') !== -1 || src.indexOf('doubleclick') !== -1 || src.indexOf('googlesyndication') !== -1) { $(this).fadeOut(300, function() { $(this).remove(); }); closedCount++; } }); // 显示结果 if (closedCount > 0) { showNotification(`已关闭 ${closedCount} 个视频广告！`, "success"); } } // 绑定关闭按钮 $("#closeAllAds").click(closeVideoSiteAds); // 定期检查并关闭广告 setInterval(closeVideoSiteAds, 3000); // 视频网站广告检查更频繁 // 监听视频播放事件，在视频开始播放时检查广告 $('video').on('play', function() { setTimeout(closeVideoSiteAds, 1000); }); // 监听视频暂停事件，关闭可能出现的暂停广告 $('video').on('pause', function() { setTimeout(closeVideoSiteAds, 500); }); });

最佳实践和注意事项

1. 尊重网站和广告商的权益

虽然广告屏蔽技术可以改善用户体验，但我们也应该尊重网站和广告商的合法权益。以下是一些最佳实践：

$(document).ready(function(){ // 设置可接受的广告标准 var acceptableAdStandards = { maxArea: 30000, // 最大广告面积（平方像素） maxDuration: 15, // 视频广告最长时长（秒） nonIntrusiveOnly: true, // 仅允许非侵入式广告 noAutoPlay: true, // 不允许自动播放 noTracking: true // 不允许追踪用户 }; // 改进的广告关闭函数，只关闭不符合标准的广告 function closeUnacceptableAds() { var closedCount = 0; // 检查每个广告元素是否符合标准 $('.ad, .ads, .advertisement, .banner, [class*="ad"]').each(function() { var ad = $(this); var isAcceptable = true; // 检查广告大小 var width = ad.width(); var height = ad.height(); var area = width * height; if (area > acceptableAdStandards.maxArea) { isAcceptable = false; } // 检查是否是侵入式广告 var position = ad.css('position'); var zIndex = ad.css('z-index'); if (acceptableAdStandards.nonIntrusiveOnly && (position === 'fixed' || position === 'absolute') && parseInt(zIndex) > 100) { isAcceptable = false; } // 检查是否自动播放（如果是视频广告） if (acceptableAdStandards.noAutoPlay && ad.find('video[autoplay]').length > 0) { isAcceptable = false; } // 如果广告不符合标准，则关闭 if (!isAcceptable) { ad.fadeOut(300, function() { $(this).remove(); }); closedCount++; } }); // 显示结果 if (closedCount > 0) { showNotification(`已关闭 ${closedCount} 个不符合标准的广告！`, "success"); } } // 添加白名单功能，允许用户指定不屏蔽的网站 function isWhitelistedSite() { var whitelistedSites = JSON.parse(localStorage.getItem('adWhitelist') || '[]'); var currentSite = window.location.hostname; return whitelistedSites.indexOf(currentSite) !== -1; } // 添加网站到白名单 function addToWhitelist() { var whitelistedSites = JSON.parse(localStorage.getItem('adWhitelist') || '[]'); var currentSite = window.location.hostname; if (whitelistedSites.indexOf(currentSite) === -1) { whitelistedSites.push(currentSite); localStorage.setItem('adWhitelist', JSON.stringify(whitelistedSites)); showNotification(`已将 ${currentSite} 添加到白名单！`, "success"); // 隐藏关闭广告按钮 $('#closeAllAds, #showStatsBtn').hide(); } else { showNotification(`${currentSite} 已在白名单中！`, "info"); } } // 从白名单移除网站 function removeFromWhitelist() { var whitelistedSites = JSON.parse(localStorage.getItem('adWhitelist') || '[]'); var currentSite = window.location.hostname; var index = whitelistedSites.indexOf(currentSite); if (index !== -1) { whitelistedSites.splice(index, 1); localStorage.setItem('adWhitelist', JSON.stringify(whitelistedSites)); showNotification(`已将 ${currentSite} 从白名单移除！`, "success"); // 显示关闭广告按钮 $('#closeAllAds, #showStatsBtn').show(); } else { showNotification(`${currentSite} 不在白名单中！`, "info"); } } // 添加白名单管理按钮 var whitelistBtn = $('<button id="whitelistBtn">加入白名单</button>'); whitelistBtn.css({ 'position': 'fixed', 'top': '10px', 'right': '250px', 'z-index': '9999', 'background-color': '#9C27B0', 'color': 'white', 'border': 'none', 'padding': '8px 15px', 'border-radius': '4px', 'cursor': 'pointer', 'font-weight': 'bold', 'box-shadow': '0 2px 5px rgba(0,0,0,0.2)' }); // 检查当前网站是否在白名单中，并更新按钮文本 if (isWhitelistedSite()) { whitelistBtn.text('移出白名单'); whitelistBtn.click(removeFromWhitelist); $('#closeAllAds, #showStatsBtn').hide(); } else { whitelistBtn.text('加入白名单'); whitelistBtn.click(addToWhitelist); } $('body').append(whitelistBtn); // 如果网站不在白名单中，则执行广告关闭 if (!isWhitelistedSite()) { // 绑定关闭按钮 $("#closeAllAds").click(closeUnacceptableAds); // 定期检查并关闭广告 setInterval(closeUnacceptableAds, 5000); } });

2. 性能优化注意事项

广告屏蔽脚本本身也可能影响网站性能，因此我们需要注意以下几点：

$(document).ready(function(){ // 1. 使用事件委托减少事件监听器数量 $('body').on('click', '#closeAllAds', function() { closeAllAds(); }); // 2. 使用requestAnimationFrame优化DOM操作 function optimizedRemoveAd(adElement) { requestAnimationFrame(function() { adElement.style.opacity = '0'; adElement.style.transition = 'opacity 0.3s ease'; requestAnimationFrame(function() { setTimeout(function() { requestAnimationFrame(function() { adElement.remove(); }); }, 300); }); }); } // 3. 批量处理DOM操作，减少重排和重绘 function batchCloseAds(adElements) { // 创建文档片段 var fragment = document.createDocumentFragment(); // 将所有广告元素添加到片段中 adElements.forEach(function(ad) { // 使用cloneNode而不是直接操作原始元素 var clone = ad.cloneNode(true); fragment.appendChild(clone); // 从原始DOM中移除广告 ad.remove(); }); // 触发一次重排 fragment.offsetHeight; // 清理片段 while (fragment.firstChild) { fragment.removeChild(fragment.firstChild); } } // 4. 使用IntersectionObserver懒加载广告检测 var adObserver = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { var adElement = entry.target; // 检查是否是广告 if (isAdElement(adElement)) { optimizedRemoveAd(adElement); adObserver.unobserve(adElement); } } }); }, { rootMargin: '100px', // 提前100px检测 threshold: 0.1 // 元素10%可见时触发 }); // 5. 限制选择器复杂度 function simpleAdSelector() { // 使用简单的ID和类选择器，而不是复杂的选择器 var simpleSelectors = [ '#ad', '#ads', '#banner', '#popup', '.ad', '.ads', '.banner', '.popup' ]; var ads = []; simpleSelectors.forEach(function(selector) { var elements = document.querySelectorAll(selector); for (var i = 0; i < elements.length; i++) { ads.push(elements[i]); } }); return ads; } // 6. 使用性能API监控脚本性能 function monitorPerformance() { if ('performance' in window) { var startMark = 'adBlockerStart'; var endMark = 'adBlockerEnd'; // 设置开始标记 performance.mark(startMark); // 执行广告关闭函数 closeAllAds(); // 设置结束标记 performance.mark(endMark); // 测量执行时间 performance.measure('adBlockerDuration', startMark, endMark); // 获取测量结果 var measures = performance.getEntriesByName('adBlockerDuration'); var duration = measures[0].duration; console.log('广告关闭脚本执行时间: ' + duration + 'ms'); // 如果执行时间过长，可以考虑优化 if (duration > 100) { console.warn('广告关闭脚本执行时间过长，可能需要优化'); } // 清理标记 performance.clearMarks(startMark); performance.clearMarks(endMark); performance.clearMeasures('adBlockerDuration'); } } // 使用性能监控的版本 $("#closeAllAds").click(monitorPerformance); });

3. 兼容性和错误处理

为了确保广告屏蔽脚本在各种环境下都能正常工作，我们需要考虑兼容性和错误处理：

$(document).ready(function(){ // 1. 检查jQuery是否加载 if (typeof jQuery === 'undefined') { console.error('jQuery未加载，广告屏蔽脚本无法正常工作'); // 尝试动态加载jQuery var script = document.createElement('script'); script.src = 'https://code.jquery.com/jquery-3.6.0.min.js'; script.onload = function() { console.log('jQuery已加载，重新初始化广告屏蔽脚本'); initAdBlocker(); }; document.head.appendChild(script); } else { initAdBlocker(); } // 2. 初始化函数，包含错误处理 function initAdBlocker() { try { // 检查浏览器兼容性 if (!checkBrowserCompatibility()) { console.warn('当前浏览器不支持广告屏蔽脚本的全部功能'); showNotification('您的浏览器版本过低，部分功能可能无法正常使用', 'warning'); } // 创建关闭按钮 createCloseButton(); // 初始化广告关闭功能 initAdClosing(); // 初始化统计功能 initStatistics(); console.log('广告屏蔽脚本初始化成功'); } catch (error) { console.error('广告屏蔽脚本初始化失败:', error); showNotification('广告屏蔽功能初始化失败，请刷新页面重试', 'error'); } } // 3. 浏览器兼容性检查 function checkBrowserCompatibility() { var compatible = true; // 检查MutationObserver支持 if (!('MutationObserver' in window)) { console.warn('当前浏览器不支持MutationObserver，动态广告检测功能将不可用'); compatible = false; } // 检查IntersectionObserver支持 if (!('IntersectionObserver' in window)) { console.warn('当前浏览器不支持IntersectionObserver，懒加载检测功能将不可用'); compatible = false; } // 检查localStorage支持 try { localStorage.setItem('test', 'test'); localStorage.removeItem('test'); } catch (e) { console.warn('当前浏览器不支持localStorage，统计功能将不可用'); compatible = false; } return compatible; } // 4. 安全的广告关闭函数 function safeCloseAd(adElement) { try { // 检查元素是否仍然存在于DOM中 if (!adElement || !adElement.parentNode) { return; } // 使用jQuery的fadeOut方法，如果失败则回退到直接移除 try { $(adElement).fadeOut(300, function() { $(this).remove(); }); } catch (e) { console.warn('使用jQuery关闭广告失败，尝试直接移除:', e); adElement.parentNode.removeChild(adElement); } } catch (error) { console.error('关闭广告时出错:', error); } } // 5. 错误边界包装器 function withErrorHandling(fn, errorMessage) { return function() { try { return fn.apply(this, arguments); } catch (error) { console.error(errorMessage || '执行函数时出错:', error); showNotification(errorMessage || '操作失败，请稍后重试', 'error'); return null; } }; } // 使用错误边界包装关键函数 var safeCloseAllAds = withErrorHandling(closeAllAds, '关闭广告时出错'); var safeShowNotification = withErrorHandling(showNotification, '显示通知时出错'); // 6. 优雅降级方案 function getAdClosingMethod() { // 检查最佳方法是否可用 if (window.jQuery && typeof jQuery.fn.fadeOut === 'function') { return 'jquery'; } else if (window.CSS && CSS.supports && CSS.supports('opacity', '0')) { return 'css'; } else { return 'direct'; } } // 根据可用方法关闭广告 function closeAdWithAvailableMethod(adElement) { var method = getAdClosingMethod(); switch (method) { case 'jquery': $(adElement).fadeOut(300, function() { $(this).remove(); }); break; case 'css': adElement.style.transition = 'opacity 0.3s'; adElement.style.opacity = '0'; setTimeout(function() { if (adElement.parentNode) { adElement.parentNode.removeChild(adElement); } }, 300); break; case 'direct': if (adElement.parentNode) { adElement.parentNode.removeChild(adElement); } break; } } // 7. 添加重试机制 function retryOperation(operation, maxRetries, delay) { return new Promise(function(resolve, reject) { var retries = 0; function attempt() { try { var result = operation(); resolve(result); } catch (error) { retries++; if (retries >= maxRetries) { reject(error); } else { setTimeout(attempt, delay); } } } attempt(); }); } // 使用重试机制关闭广告 function closeAdWithRetry(adElement, maxRetries, delay) { maxRetries = maxRetries || 3; delay = delay || 500; var operation = function() { closeAdWithAvailableMethod(adElement); return true; }; retryOperation(operation, maxRetries, delay) .catch(function(error) { console.error('关闭广告失败，已达到最大重试次数:', error); }); } });