js怎么屏蔽网站广告

屏蔽网站广告的方法主要有以下几种：使用浏览器插件、手动修改Hosts文件、通过CSS隐藏广告元素、使用JavaScript删除广告节点。其中，使用JavaScript删除广告节点是一个灵活而高效的方法，适用于需要自定义屏蔽广告需求的场景。通过JavaScript代码，可以动态地查找并移除页面中的广告元素。

一、使用浏览器插件

使用广告屏蔽插件是最简单有效的方法之一，例如AdBlock、uBlock Origin等插件，这些插件可以自动识别并屏蔽大多数网站上的广告。

AdBlock插件

AdBlock是一个非常流行的广告屏蔽插件，支持多种浏览器。安装后，AdBlock会自动屏蔽大多数广告，无需用户进行额外设置。

安装步骤：
- 打开浏览器的扩展程序商店。
- 搜索“AdBlock”。
- 点击“添加到浏览器”。
配置和使用：
- 安装完成后，AdBlock会自动运行。
- 用户可以通过点击浏览器工具栏上的AdBlock图标进行进一步配置，例如允许某些网站显示广告。

uBlock Origin插件

uBlock Origin是另一个强大的广告屏蔽插件，具有较高的自定义能力和较低的资源占用。

安装步骤：
- 打开浏览器的扩展程序商店。
- 搜索“uBlock Origin”。
- 点击“添加到浏览器”。
配置和使用：
- 安装完成后，uBlock Origin会自动运行。
- 用户可以通过点击浏览器工具栏上的uBlock Origin图标进行配置，例如启用或禁用特定过滤规则。

二、手动修改Hosts文件

通过修改Hosts文件可以屏蔽特定的广告服务器，这种方法需要一定的技术基础，但可以在操作系统层面上阻止广告的加载。

修改Hosts文件步骤

找到Hosts文件的位置：
- Windows系统：C:WindowsSystem32driversetchosts
- macOS和Linux系统：/etc/hosts
编辑Hosts文件：
- 打开Hosts文件（需要管理员权限）。
- 添加广告服务器的域名并将其指向本地回环地址127.0.0.1，例如：
```
127.0.0.1  ads.example.com
127.0.0.1  tracking.example.com
```
保存并生效：
- 保存Hosts文件。
- 重启计算机或刷新DNS缓存使更改生效。

三、通过CSS隐藏广告元素

利用CSS隐藏广告元素是一种简便的方法，适用于需要在特定网站上屏蔽广告的场景。

CSS代码示例

通过浏览器控制台注入CSS：

打开浏览器开发者工具（F12）。

在控制台中输入以下代码：

var style = document.createElement('style');
style.innerHTML = `
  .ad-banner, .ad-sidebar, .ad-footer {
    display: none !important;
  }
`;
document.head.appendChild(style);

保存为用户样式表：
- 使用浏览器插件（例如Stylish或Stylus）将上述CSS代码保存为用户样式表。
- 这样可以在每次访问该网站时自动应用隐藏广告的样式。

四、使用JavaScript删除广告节点

使用JavaScript删除广告节点是最灵活的方法，可以根据具体需求编写代码来屏蔽广告。

JavaScript代码示例

通过浏览器控制台注入JavaScript：

打开浏览器开发者工具（F12）。

在控制台中输入以下代码：

// 查找并移除广告节点
function removeAds() {
  var adSelectors = ['.ad-banner', '.ad-sidebar', '.ad-footer']; // 广告元素的CSS选择器
  adSelectors.forEach(function(selector) {
    var ads = document.querySelectorAll(selector);
    ads.forEach(function(ad) {
      ad.remove();
    });
  });
}
// 初次运行删除广告
removeAds();
// 监听DOM变化并实时删除广告
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    removeAds();
  });
});
observer.observe(document.body, { childList: true, subtree: true });

保存为用户脚本：
- 使用浏览器插件（例如Tampermonkey或Greasemonkey）将上述JavaScript代码保存为用户脚本。
- 这样可以在每次访问该网站时自动执行屏蔽广告的脚本。

五、结合多种方法

结合多种方法可以达到更好的屏蔽广告效果，例如使用浏览器插件屏蔽大部分广告，同时使用JavaScript删除特定广告节点。

综合应用

安装并配置广告屏蔽插件：
- 安装AdBlock或uBlock Origin插件并进行基本配置。

编写和注入自定义JavaScript脚本：

使用Tampermonkey插件编写自定义JavaScript脚本，针对特定广告节点进行额外处理。

例如：

// 自定义广告屏蔽脚本
function customRemoveAds() {
  var specificAdSelectors = ['.specific-ad-banner', '.specific-ad-sidebar'];
  specificAdSelectors.forEach(function(selector) {
    var ads = document.querySelectorAll(selector);
    ads.forEach(function(ad) {
      ad.remove();
    });
  });
}
// 初次运行自定义脚本
customRemoveAds();
// 监听DOM变化并实时执行自定义脚本
var customObserver = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    customRemoveAds();
  });
});
customObserver.observe(document.body, { childList: true, subtree: true });

通过以上多种方法的结合，几乎可以屏蔽所有类型的广告，从而提供一个更加清爽的浏览体验。对于开发者和技术爱好者来说，使用JavaScript删除广告节点不仅可以学习和提升编程技能，还能根据具体需求灵活调整屏蔽策略。