【免费下载链接】cookieconsent:cookie: Simple cross-browser cookie-consent plugin written in vanilla js项目地址https://gitcode.com/gh_mirrors/co/cookieconsent点击查看免费下载本指南围绕 CookieConsent 的脚本管理能力展开系统讲解两种脚本控制方式基于script标签的data-category/data-service声明式管理以及基于onConsent/onChange回调与自定义事件的编程式管理。读完本文你将掌握如何让分析类、广告类第三方脚本仅在用户授权后加载、如何在授权被撤销时执行清理逻辑以及底层脚本收集与顺序加载的实现原理。脚本管理的两种方式总览CookieConsent 提供了两条并行的脚本管理路径开发者可以根据使用场景任选其一通过script标签在 HTML 脚本标签上声明data-category、data-service等属性插件会在用户表达同意后自动“复活”对应脚本通过 callbacks/events在CookieConsent.run()的onConsent/onChange回调或对应自定义事件中用acceptedCategory()、acceptedService()等 API 判断当前授权状态手动执行脚本加载逻辑。两种方式各有适用场景标签方式零 JavaScript 代码、声明式、易于审查回调方式灵活、可编排复杂逻辑。相关回调的完整说明见 docs/advanced/callbacks-events.md。可用脚本属性一览无论采用哪种标签方式都需要先在script上声明以下属性。其中data-category是唯一必需属性其余均可选属性是否必填作用data-category必需指定脚本所属的类别名称如analytics插件据此判断何时执行该脚本data-service可选指定脚本所属的服务名称一旦指定preferencesModal中会为它生成独立的开关toggledata-type可选自定义脚本类型例如module用于设置typemoduledata-src可选可替代src使用用于规避某些场景下的属性校验问题基础用法示例script typetext/plain >script // Always executed /script改造后脚本仅在对应类别被授权时执行script typetext/plain >script typetext/plain >script typetext/plain srcmy-service-module.js >script typetext/plain >script typetext/plain >script typetext/plain >CookieConsent.run({ categories: { analytics: { services: { ga: { label: Google Analytics, onAccept: () { // enable ga }, onReject: () { // disable ga }, cookies: [ { name: /^(_ga|_gid)/ } ] } } } } })类型定义可参考 types/index.d.tsService接口包含可选的label、onAccept、onReject和cookies。需要注意只要某个类别下有一个服务被启用整个类别就会被视为已启用/已接受。通过回调与事件管理脚本标签方式之外也可以在 JavaScript 回调中完成脚本管理。这种方式适合需要编排复杂加载逻辑的场景。在onConsent回调中判断并加载onConsent在用户首次表达同意以及此后每次页面加载时触发。可在其中结合acceptedCategory()与acceptedService()判断状态CookieConsent.run({ onConsent: function(){ if(CookieConsent.acceptedCategory(analytics)){ // Analytics category enabled } if(CookieConsent.acceptedService(Google Analytics, analytics)){ // Google Analytics enabled } } });两个判断 API 的实现见 src/core/api.jsacceptedCategory()检查类别是否位于当前已接受的类别集合中acceptedService()则检查指定类别下是否已接受指定服务。二者的类型签名acceptedCategory(categoryName): boolean、acceptedService(serviceName, categoryName): boolean见 types/index.d.ts。如果要在回调中动态注入外部脚本还可以使用CookieConsent.loadScript(src, attrs)API——它返回一个 Promise会在脚本加载成功后 resolve加载失败则移除节点并 resolve(false)见 src/core/api.js。在onChange回调中感知状态的精确变化onChange在用户修改授权偏好且此前已表达过同意时触发。它的参数携带了changedCategories与changedServices可以精确判断“哪个类别/服务刚刚被启用或禁用”CookieConsent.run({ onChange: function({changedCategories, changedServices}){ if(changedCategories.includes(analytics)){ if(CookieConsent.acceptedCategory(analytics)){ // Analytics category was just enabled }else{ // Analytics category was just disabled } if(changedServices[analytics].includes(Google Analytics)){ if(CookieConsent.acceptedService(Google Analytics, analytics)){ // Google Analytics was just enabled }else{ // Google Analytics was just disabled } } } } })onChange的参数类型在 types/index.d.ts 中有明确定义changedCategories为字符串数组changedServices为以类别名为键、服务名数组为值的对象。回调的注册与保存发生在配置初始化阶段src/core/config-init.js。使用自定义事件每个回调都有对应的自定义事件事件名格式为cc:加回调名。例如onChange对应cc:onChangeonConsent对应cc:onConsent。用事件监听器同样可以获取这些数据window.addEventListener(cc:onChange, ({detail}) { /** * detail.cookie * detail.changedCategories * detail.changedServices */ // do something });更多事件cc:onFirstConsent、cc:onConsent、cc:onChange、cc:onModalShow、cc:onModalHide、cc:onModalReady的用法与参数说明见 docs/advanced/callbacks-events.md。脚本标签与回调的执行次数差异重要一个script标签在整个生命周期内最多只能被启用或禁用一次——脚本一旦执行_executed标记即为true后续状态再变化也不会重复执行。而onChange回调或其等价的事件监听器可以执行多次每次用户修改偏好都会触发。因此若某个脚本需要在用户多次反复切换授权时都做出响应例如每次都重新注入/移除第三方 SDK应优先使用回调/事件方式而“一次性加载”的脚本则更适合用标签方式。底层原理脚本从收集到执行的完整链路前提开启manageScriptTags标签方式依赖配置项manageScriptTags。只有将其设为true插件才会收集并管理带data-category的脚本标签否则脚本会被完全忽略。相关说明见 docs/reference/configuration-reference.md 的manageScriptTags一节CookieConsent.run({ manageScriptTags: true, categories: { /* ... */ } })配置项在 src/core/config-init.js 中被写入全局配置且retrieveScriptElements()会在manageScriptTags为false时直接返回src/utils/general.js。测试 tests/config.test.js 也验证了这一点当manageScriptTagsfalse时带data-category的脚本标签不会被接管。阶段一收集与解析脚本标签在配置初始化时retrieveScriptElements()会通过querySelectorAll(document, script[data-category])收集页面中所有带data-category属性的脚本选择器常量SCRIPT_TAG_SELECTOR data-category定义于 src/utils/constants.js。对每个脚本它会读取data-category与data-service对应源码中的dataset.service解析可选的!前缀并设置_runOnDisable标记校验类别是否真实存在于配置中若存在则记录_script、_executed: false、_categoryName、_serviceName等元信息。阶段二按授权状态顺序执行脚本当同意有效时run()会调用manageExistingScripts()见 src/core/api.js在opt-out模式下则会基于默认启用类别调用src/core/api.js。执行逻辑位于 src/utils/scripts.js用递归函数loadScriptsHelper顺序遍历脚本数组已执行的脚本_executed true直接跳过依次判断“类别刚被启用 / 类别刚被禁用 / 服务刚被启用 / 服务刚被禁用”四种状态命中任一条件即执行执行时创建全新的script节点把原脚本的innerHTML与属性复制过去移除type和data-category再replaceWith替换原节点外部脚本按顺序加载只有带有效src的脚本才被视为外部脚本且下一个脚本必须等当前脚本的onload/onerror触发后才开始加载保证加载次序可控。阶段三默认启用类别的跟踪retrieveEnabledCategoriesAndServices()见 src/utils/scripts.js会记录配置中readOnly或enabled的类别及其服务这些信息在opt-out模式下用于在尚未表达同意时按默认状态加载脚本。测试验证四种脚本场景的覆盖仓库的 API 测试 tests/api.test.js 在beforeAll中构造了覆盖全部四种状态组合的脚本标签与实际使用场景一一对应script typetext/plain>赞分享【免费下载链接】cookieconsent:cookie: Simple cross-browser cookie-consent plugin written in vanilla js项目地址https://gitcode.com/gh_mirrors/co/cookieconsent点击查看免费下载相关推荐Middleman中的第三方脚本管理优化第三方资源加载Middleman中的第三方脚本管理优化第三方资源加载 在现代Web开发中第三方脚本如分析工具、广告SDK、社交分享按钮已成为页面不可或缺的组成部分。然前端开发工具AutoSubs 实战DaVinci Resolve / Fusion 脚本编写与调试指南Console、脚本类型、事件回调与 FuScriptAutoSubs 实战DaVinci Resolve / Fusion 脚本编写与调试指南Console、脚本类型、事件回调与 FuScript 导读 本人工智能AI 应用语音音频本地部署桌面应用Ceph RGW 通过 Lua 脚本将桶事件通知接入 NATSnats_adapter 实战指南Ceph RGW 通过 Lua 脚本将桶事件通知接入 NATSnats_adapter 实战指南 Ceph RADOS GatewayRGW内置的 Lua存储分布式文件系统对象存储后端高可用上一篇fmt头文件only模式灵活部署方案详解下一篇drizzle-orm-pg 0.16.3 变更解析修复 0.16 drizzle 包的 peer dependency 报错创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考