用js屏蔽被http劫持的浮动广告实现方法

要屏蔽被 HTTP 劫持的浮动广告，可以通过以下步骤实现：

步骤一：获取浮动广告元素

首先需要获取浮动广告元素的选择器。在浏览器中打开被劫持的网站，并打开浏览器的开发者工具。在 Elements 面板中，选择被劫持的广告元素，在该元素上右键单击，选择 Copy ▸ Copy selector（复制元素的选择器）。这样就可以获得该广告元素的选择器。例如：

#ad-floating-div

步骤二：使用 JavaScript 屏蔽广告元素

接下来，需要在网页中添加 JavaScript 代码，用于屏蔽广告元素。以下是示例代码：

// 获取浮动广告元素的选择器
var selector = '#ad-floating-div';

// 等待页面加载完成后执行屏蔽广告的代码
window.addEventListener('load', function() {
  // 获取浮动广告元素
  var adElement = document.querySelector(selector);

  // 判断浮动广告元素是否存在，若存在则进行屏蔽
  if (adElement) {
    adElement.style.display = 'none'; // 隐藏元素
    console.log('屏蔽了被劫持的浮动广告'); // 输出消息到控制台
  }
});

在以上代码中，首先获取浮动广告元素的选择器，然后等待页面加载完成后执行屏蔽广告的代码。在执行代码时，先获取浮动广告元素，并判断该元素是否存在。如果存在，则将元素的样式设置为 display: none，即隐藏该元素，完成屏蔽操作。同时也会在浏览器的控制台输出一条消息。

示例一：使用 Tampermonkey 屏蔽广告

Tampermonkey 是一款浏览器插件，可以以用户脚本的形式自定义网页的行为。可以通过 Tampermonkey 添加 JavaScript 代码来屏蔽浮动广告。

以下是示例代码：

// ==UserScript==
// @name         Block Floating Advertisements
// @namespace    http://example.com/
// @version      1
// @description  Block floating advertisements that have been hijacked by HTTP injection attacks
// @match        http://*/*
// @match        https://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 获取浮动广告元素的选择器
    var selector = '#ad-floating-div';

    // 在页面加载完成后执行屏蔽广告的代码
    window.addEventListener('load', function() {
        // 获取浮动广告元素
        var adElement = document.querySelector(selector);

        // 判断浮动广告元素是否存在，若存在则进行屏蔽
        if (adElement) {
            adElement.style.display = 'none'; // 隐藏元素
            console.log('屏蔽了被劫持的浮动广告'); // 输出消息到控制台
        }
    });
})();

在以上代码中，首先定义了一个 Tampermonkey 脚本，并设置了脚本的名称、命名空间、版本号、描述信息、匹配的网站、授权等属性。然后定义了一个立即执行函数，在该函数中实现屏蔽广告的逻辑。

示例二：在网站中直接使用 JavaScript 屏蔽广告

如果需要在网站中直接屏蔽广告，可以将 JavaScript 代码添加到网站的 <head> 或 <body> 元素中。以下是示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <meta charset="UTF-8">
  <script>
    // 获取浮动广告元素的选择器
    var selector = '#ad-floating-div';

    // 等待页面加载完成后执行屏蔽广告的代码
    window.addEventListener('load', function() {
      // 获取浮动广告元素
      var adElement = document.querySelector(selector);

      // 判断浮动广告元素是否存在，若存在则进行屏蔽
      if (adElement) {
        adElement.style.display = 'none'; // 隐藏元素
        console.log('屏蔽了被劫持的浮动广告'); // 输出消息到控制台
      }
    });
  </script>
</head>
<body>
  <h1>Welcome to my website!</h1>
  <div id="ad-floating-div" style="position: fixed; z-index: 1000;">This is a floating advertisement.</div>
</body>
</html>

在以上代码中，首先定义了一个 JavaScript 脚本，该脚本与网站的 HTML 文档存放在同一个文件中，将该脚本添加到网页的 <head> 元素中。然后实现屏蔽广告的逻辑，与之前的示例代码相同。同时也在网页中添加了一个浮动广告元素，供测试使用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：用js屏蔽被http劫持的浮动广告实现方法 - Python技术站

用js屏蔽被http劫持的浮动广告实现方法

步骤一：获取浮动广告元素

步骤二：使用 JavaScript 屏蔽广告元素

示例一：使用 Tampermonkey 屏蔽广告

示例二：在网站中直接使用 JavaScript 屏蔽广告

相关文章