⭐ Обнаружение AdBlock с помощью HTML CSS и JavaScript

04.12.2024, 06:22
1 просмтотр
(0)
⭐ Обнаружение AdBlock с помощью HTML CSS и JavaScript
Скачать
Демо

AdBlocker - это фильтрация контента или расширение веб-браузера, которое блокирует различные онлайн-рекламы, мешающие просмотру. Он помогает пользователю предотвратить отображение непреднамеренных всплывающих окон, мигающих баннеров и онлайн-рекламы.

Вы можете посмотреть видео демонстрацию, попробовать сверстать самому по видео или скачать архив с готовым кодом по ссылке, указанной ниже.. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.

В архиве находится:

  • Исходные файлы HTML, 
  • Исходные файлы CSS, 
  • Исходные файлы jаvascript, 
  • Иконки шрифтов, 
  • Файлы библиотеки и плагинов, 

Совместимые браузеры 

  • Firefox, 
  • Safari, 
  • Edge, 
  • Opera, 
  • Chrome, 
  • Yandex, 

В нашей программе [Обнаружение AdBlock], как вы можете видеть на предварительном изображении, есть всплывающее окно с текстом и кнопкой для закрытия всплывающего окна. Если пользователь включил AdBlocker, то это всплывающее окно будет отображено; если нет, то это всплывающее окно не будет отображено.

В Демо видео вы увидели, как выглядит этот Adblock Detector и как я создал его, используя только HTML, CSS и jаvascript. Коды и концепции, лежащие в основе создания этого детектора, настолько просты, что даже новичок может легко их понять. Когда AdBlocker включен, он предотвращает отображение некоторых классов, идентификаторов и скриптов в браузере пользователя.

Вот некоторые классы ad, ads, ad-banner, ad-box, ad-badge, которые AdBlocker добавляет display: none; свойство, чтобы скрыть от посетителей. Итак, мы создали элемент, добавили к нему эти классы и проверили, что возвращает этот элемент.

Если AdBlocker включен, то, очевидно, он вернет «display: none», поскольку adblocker добавит значение «none», чтобы скрыть его, а если adblocker не включен, то он вернет «display: block».

HTML КОД:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Detect AdBlock using jаvascript</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div id="detect"></div>
  <div class="wrapper">
    <div class="content">
      <div class="warn-icon">
        <span class="icon"><i class="fas fa-exclamation"></i></span>
      </div>
      <h2>AdBlock Detected!</h2>
      <p>Our website is made possible by displaying ads to our visitors. Please supporting us by whitelisting our website.</p>
      <div class="btn">
        <div class="bg-layer"></div>
        <button>Okay, I'll Whitelist</button>
      </div>
    </div>
  </div>

  
  <script src="main.js"></script>

</body>
</html>

CSS КОД:

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  width: 100%;
  height: 100vh;
  background: -o-linear-gradient(315deg, #9b27ca 0%, #9927cf 0%, #d33639 100%, #f92121 100%);
  background: linear-gradient(135deg, #9b27ca 0%, #9927cf 0%, #d33639 100%, #f92121 100%);
}
::-moz-selection{
  color: #fff;
  background: #9b27ca;
}
::selection{
  color: #fff;
  background: #9b27ca;
}
.wrapper{
  position: absolute;
  max-width: 480px;
  top: 50%;
  left: 50%;
  width: 100%;
  padding: 40px 30px;
  background: #fff;
  border-radius: 15px;
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translate(-50%, -50%) scale(1.2);
      -ms-transform: translate(-50%, -50%) scale(1.2);
          transform: translate(-50%, -50%) scale(1.2);
  -webkit-box-shadow: 10px 10px 15px rgba(0,0,0,0.06);
          box-shadow: 10px 10px 15px rgba(0,0,0,0.06);
  -webkit-transition: opacity 0.2s 0s ease-in-out,
              -webkit-transform 0.2s 0s ease-in-out;
  transition: opacity 0.2s 0s ease-in-out,
              -webkit-transform 0.2s 0s ease-in-out;
  -o-transition: opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;
  transition: opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;
  transition: opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out,
              -webkit-transform 0.2s 0s ease-in-out;
}
.wrapper.show{
  opacity: 1;
  pointer-events: auto;
  -webkit-transform:translate(-50%, -50%) scale(1);
      -ms-transform:translate(-50%, -50%) scale(1);
          transform:translate(-50%, -50%) scale(1);
}
.wrapper .content,
.content .warn-icon,
.warn-icon .icon{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.wrapper .content{
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.content .warn-icon{
  height: 115px;
  width: 115px;
  border-radius: 50%;
  background: -webkit-gradient(linear, left top, left bottom, from(#9b27ca), color-stop(0%, #9927cf), color-stop(100%, #d33639), to(#f92121));
  background: -o-linear-gradient(#9b27ca 0%, #9927cf 0%, #d33639 100%, #f92121 100%);
  background: linear-gradient(#9b27ca 0%, #9927cf 0%, #d33639 100%, #f92121 100%);
}
.warn-icon .icon{
  height: 100px;
  width: 100px;
  background: #fff;
  border-radius: inherit;
}
.warn-icon .icon i{
  background: -webkit-gradient(linear, left top, left bottom, from(#9b27ca), color-stop(0%, #9927cf), color-stop(100%, #d33639), to(#f92121));
  background: -o-linear-gradient(#9b27ca 0%, #9927cf 0%, #d33639 100%, #f92121 100%);
  background: linear-gradient(#9b27ca 0%, #9927cf 0%, #d33639 100%, #f92121 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 50px;
}
.content h2{
  margin-top: 35px;
  font-size: 32px;
}
.content p{
  font-size: 19px;
  text-align: center;
  margin-top: 20px;
}
.btn{
  height: 57px;
  width: 223px;
  margin-top: 30px;
  border-radius: 50px;
  position: relative;
  overflow: hidden;
}
.btn .bg-layer{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  background: -webkit-linear-gradient(135deg, #9b27ca, #d33639, #9b27ca, #d33639);
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.btn:hover .bg-layer{
  left: 0;
}
.content button{
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  background: none;
  font-size: 18px;
  border: none;
  outline: none;
  color: #fff;
  cursor: pointer;
}

jаvascript КОД:

const detect = document.querySelector("#detect");
    const wrapper = document.querySelector(".wrapper");
    const button = wrapper.querySelector("button");

    let adClasses = ["ad", "ads", "adsbox", "AdGuard", "doubleclick", "ad-placement", "ad-placeholder", "adbadge", "BannerAd"];
    for(let item of adClasses){
      detect.classList.add(item);
    }
    let getProperty = window.getComputedStyle(detect).getPropertyValue("display");
    if(!wrapper.classList.contains("show")){
      getProperty == "none" ? wrapper.classList.add("show") : wrapper.classList.remove("show");
    }
    button.addEventListener("click", ()=>{
      wrapper.classList.remove("show");
    });

Вот и все, теперь вы успешно создали AdBlock Detector с помощью HTML CSS и jаvascript. Если ваш код не работает или вы столкнулись с какой-либо ошибкой/проблемой, пожалуйста, загрузите файлы исходного кода с помощью данной кнопки загрузки. Это бесплатно, и будет загружен файл .zip, который вам нужно будет извлечь.

Скачать
Демо

Похожее видео:

Посмотреть все
Добавить комментарий
Кликните на изображение чтобы обновить код, если он неразборчив
x