在收到用户同意之前阻止第三方Cookie jQuery Cookie横幅

  • 源码大小:14.36KB
  • 所需积分:1积分
  • 源码编号:19JP-3344
  • 浏览次数:360次
  • 最后更新:2023年06月03日
  • 所属栏目:其他
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

另一个jQuery cookie同意插件,使您的网站或网络应用程序符合GDPR和欧盟cookie法。

Cookie是帮助分析网络流量的文件。它们保存有关浏览习惯的数据,除其他问题外,还可以用于定向广告

为访问者使用这个jQuery插件,您可以询问他们是否允许设置cookie,并阻止外部资源(如脚本、iframe等)注入的第三方cookie,直到他们接受为止。

更多功能:

  • 5种内置语言:IT、EN、DE、ES、RU。
  • 当用户接受cookie时触发一个功能。
  • 自动接受滚动和导航时的所有cookie。

参见:

  • 7最佳免费GDPR Cookie同意横幅插件在JavaScript中

如何使用它:

1.在文档中加载Cookie Banner jQuery插件的文件。

<link rel="stylesheet" href="/path/to/cookie-banner.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.cookie-banner.js"></script>

2.初始化插件并指定隐私页面的路径。

$.cookieBanner({
  cookiePageUrl: {
    en: 'privacy.html'
  }
});

3.初始化插件并指定隐私页面的路径。

$.cookieBanner({
  cookiePageUrl: {
    en: 'privacy.html'
  }
});

4.添加块cookie类指定给应阻止的资产。

<!-- Block Images -->
<img class="block-cookie" data-src="1.png" alt="image blocked">

<!-- Block Iframes like Youtube videos -->
<iframe class="block-cookie" data-src="1.html"></iframe>

<!-- Block External Scripts -->
<script class="block-cookie" src="js/external-scripts.js"></script>

<!-- Block Inline Scripts -->
<script class="block-cookie">
  ...
</script>

5.就是这样。默认情况下,此插件允许您通过消息/横幅通知访问者您的隐私政策,并阻止第三方资源,直到用户同意并单击接受按钮。

6.自定义插件的可用选项。

$.cookieBanner({

  // CSS class
  bannerClass: 'cookie-banner',

  // Custom link text
  bannerLinkText: {
    it: 'Approfondisci',
    en: 'Learn more',
    de: 'Mehr dazu',
    es: 'Descubre más',
    ru: 'Узнайте больше'
  },

  // Custom cookie consent messages
  bannerText: {
    it: 'Questo sito utilizza cookie, anche di terze parti, per migliorare la tua esperienza di navigazione. Chiudendo questo banner, scorrendo questa pagina o cliccando qualunque suo elemento acconsenti all\'uso dei cookie.',
    en: 'This website uses cookies (also third-party cookies) to provide you a better navigation experience. By closing this banner, scrolling this page or by clicking any of its elements, you agree to the use of cookies.',
    de: 'Diese Website verwendet Cookies, auch von Dritten, um Ihre Browser-Erfahrung zu verbessern. Durch das Schließen dieses Banners, das Scrollen durch diese Seite oder einen Klick auf deren Elemente, erklären Sie sich mit der Verwendung der Cookies einverstanden.',
    es: 'Este sitio web utiliza cookies propias y de terceros para mejorar tu experiencia de navegación. Cerrando este banner, recorriendo esta página o haciendo clic en cualquier elemento, autorizas el uso de cookies.',
    ru: 'Этот Сайт использует собственные и сторонние cookie-файлы для того, чтобы предоставить Вам больше возможностей при использовании сайта. Продолжая посещение веб-сайта, вы соглашаетесь на использование cookie-файлов.'
  },

  // Enables the plugin to block cookies
  blockCookie: true,
  blockCookieAttribute: 'data-src',
  blockCookieClass: 'block-cookie',

  // CSS class for the consent button
  consentButtonClass: 'cookie-banner__button',

  // Custom button text
  consentButtonText: {
    it: 'Chiudi',
    en: 'Close',
    de: 'Schließen',
    es: 'Cerrar',
    ru: 'Закрыть'
  },

  // CSS class for the button text
  consentButtonTextClass: 'cookie-banner__close',

  // Consent on scroll/navigate
  consentOnNavigation: true,
  consentOnScroll: true,

  // Config the cookies
  cookieExpiry: 365,
  cookieName: 'consentCookie',

  // Path to the privacy page
  cookiePageUrl: {
    it: '',
    en: '',
    de: '',
    es: '',
    ru: ''
  },

  // Default language
  culture: 'en',

  // Hide the cookie consent banner on scroll
  hideBannerOnScroll: true,
  
  // Prepends the cookie consent banner to a specific container
  prependBannerTo: 'body',

  // Reloads the page when button ("consentClass") is accepted
  reloadPage: false,

  // Callback
  onConsent: function() {},

});

预览截图