Flutter Web中GDPR合规Cookie同意横幅实现及Yett库加载顺序问题

一、强制Yett库优先加载的方法 #

• 内联Yett核心代码到index.html最顶部
  直接把Yett的压缩核心代码粘贴到index.html的<head>标签最开头，用<script>包裹。浏览器会优先执行这段内联代码，确保Yett的拦截逻辑在Flutter注入的所有依赖之前生效。示例代码：

  <head>
    <script>
      <!-- 粘贴Yett压缩后的核心代码 -->
    </script>
    <!-- 其他meta标签、样式表等 -->
    <script src="main.dart.js" type="module"></script>
  </head>
  

• 修改Flutter脚本的加载方式
  给index.html中的Flutter主脚本（main.dart.js）添加async属性，让它异步加载，这样Yett的同步脚本会先执行完毕：

  <script src="main.dart.js" type="module" async></script>
  

  注意：异步加载Flutter脚本可能导致页面初始加载时短暂空白，需要权衡用户体验。

二、无需Yett的替代方案 #

如果调整脚本顺序的方式不好用，手动控制第三方脚本加载会更稳妥：

• 动态注入第三方脚本
  不在index.html中提前引入Stripe和GA的脚本，而是在Flutter代码里，等用户同意Cookie政策后，通过dart:js动态注入：

  import 'dart:js' as js;
  
  void loadThirdPartyScripts() {
    // 加载Google Analytics
    final gaScript = js.context['document'].callMethod('createElement', ['script']);
    gaScript['src'] = 'https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID';
    gaScript['async'] = true;
    js.context['document'].callMethod('getElementsByTagName', ['head'])[0].callMethod('appendChild', [gaScript]);
  
    // 加载Stripe
    final stripeScript = js.context['document'].callMethod('createElement', ['script']);
    stripeScript['src'] = 'https://js.stripe.com/v3/';
    js.context['document'].callMethod('getElementsByTagName', ['head'])[0].callMethod('appendChild', [stripeScript]);
  
    // 初始化GA
    js.context['dataLayer'] = js.JsArray();
    js.context.callMethod('gtag', ['js', DateTime.now()]);
    js.context.callMethod('gtag', ['config', 'GA_TRACKING_ID']);
  }
  

  在用户点击“同意”按钮时调用这个方法，从根源上避免第三方脚本提前加载的问题。

• 使用Flutter专用Cookie同意包
  用flutter_cookie_consent这类现成的Flutter包实现同意横幅，这类包可以直接在Flutter层管理Cookie状态，配合动态加载第三方脚本，完全符合GDPR要求，不用折腾index.html的脚本顺序。

内容的提问来源于stack exchange，提问作者rya