cookies-enabler 项目使用教程
1. 项目的目录结构及介绍
nicholasruggeri/cookies-enabler
├── demo
├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── cookies-enabler.js
├── cookies-enabler.min.js
├── gulpfile.js
├── package.json
- demo: 示例文件夹,包含项目的基本使用示例。
- .gitignore: Git 忽略文件配置。
- LICENSE: 项目许可证文件。
- README.md: 项目说明文档。
- bower.json: Bower 包管理配置文件。
- cookies-enabler.js: 项目主文件,包含核心功能。
- cookies-enabler.min.js: 项目主文件的压缩版本。
- gulpfile.js: Gulp 任务配置文件。
- package.json: npm 包管理配置文件。
2. 项目的启动文件介绍
项目的启动文件是 cookies-enabler.js
。该文件包含了所有用于阻止第三方 Cookie 的功能,并且提供了初始化插件的方法。
加载脚本
<script src="cookies-enabler.js"></script>
初始化插件
COOKIES_ENABLER.init(options);
3. 项目的配置文件介绍
项目的配置文件主要是 cookies-enabler.js
中的 COOKIES_ENABLER.init(options)
方法的 options
参数。以下是默认选项:
{
scriptClass: 'ce-script',
iframeClass: 'ce-iframe',
acceptClass: 'ce-accept',
dismissClass: 'ce-dismiss',
disableClass: 'ce-disable',
bannerClass: 'ce-banner',
bannerHTML: '<p>This website uses cookies ' +
'<a href="#" class="ce-accept">Enable Cookies</a>' +
'</p>',
eventScroll: false,
scrollOffset: 200,
clickOutside: false,
cookieName: 'ce-cookie',
cookieDuration: '365',
wildcardDomain: false,
iframesPlaceholder: true,
iframesPlaceholderHTML: '<p>To view this content you need to' +
'<a href="#" class="ce-accept">Enable Cookies</a>' +
'</p>',
iframesPlaceholderClass: '',
onDisable: function() {
console.log('cookies have been disabled');
}
}
配置选项说明
- scriptClass: 脚本类名。
- iframeClass: iframe 类名。
- acceptClass: 接受按钮类名。
- dismissClass: 关闭按钮类名。
- disableClass: 禁用类名。
- bannerClass: 横幅类名。
- bannerHTML: 横幅 HTML 内容。
- eventScroll: 是否在滚动时启用 Cookie。
- scrollOffset: 滚动启用 Cookie 的偏移量。
- clickOutside: 是否在点击外部时关闭横幅。
- cookieName: Cookie 名称。
- cookieDuration: Cookie 持续时间。
- wildcardDomain: 是否在所有子域名中保存 Cookie。
- iframesPlaceholder: 是否启用 iframe 占位符。
- iframesPlaceholderHTML: iframe 占位符 HTML 内容。
- iframesPlaceholderClass: iframe 占位符类名。
- onDisable: 禁用 Cookie 时的回调函数。
通过以上配置,可以灵活地调整 cookies-enabler
插件的行为,以适应不同的需求。