WordPress嵌入CQC Widget仅登录可见问题及报错排查求助

1. 报错与显示异常的关联 #

是的，这个Uncaught TypeError: Cannot read properties of undefined (reading 'startsWith')错误直接导致Widget加载失败。脚本执行到调用startsWith方法时，依赖的变量未被初始化（处于undefined状态），脚本执行中断，无法完成Widget的渲染逻辑，所以退出登录后看不到Widget。

2. 仅登录时可见的原因 #

WordPress登录与未登录状态的环境差异是核心原因：

• 缓存机制差异：登录时WordPress默认跳过页面缓存，脚本以原始状态加载；未登录时，缓存插件（如WP Rocket、W3 Total Cache）会对页面资源做压缩、合并或修改，破坏了CQC Widget脚本的依赖变量，引发报错。
• 安全/资源限制差异：未登录时，安全插件（如Wordfence）或主题的内容安全策略（CSP）可能限制了第三方脚本的正常执行，导致脚本无法正确初始化变量；而登录状态下这类限制会被放宽。

3. 解决方法 #

排除缓存干扰 #

• 先禁用页面缓存插件，测试Widget是否恢复正常。如果有效，调整缓存插件设置：
  • 在“排除脚本”列表中添加https://www.cqc.org.uk/sites/all/modules/custom/cqc_widget/widget.js，避免插件对其进行压缩、合并操作。
  • 清除网站所有缓存（页面缓存、浏览器缓存）后重新验证。

调整脚本加载时机 #

将原脚本改为DOM加载完成后再注入，避免因DOM未就绪导致变量未定义：

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  const cqcScript = document.createElement('script');
  cqcScript.type = 'text/javascript';
  cqcScript.src = 'https://www.cqc.org.uk/sites/all/modules/custom/cqc_widget/widget.js?data-id=1-13501952705&data-host=https://www.cqc.org.uk&type=provider';
  document.body.appendChild(cqcScript);
});
</script>

检查安全策略设置 #

如果使用了安全插件或主题自带的CSP功能，确认是否阻止了https://www.cqc.org.uk域名的脚本加载。需在CSP规则中将该域名添加为允许的脚本源。

使用WordPress标准方法嵌入脚本（推荐） #

避免直接在HTML块中嵌入脚本，通过主题functions.php或自定义插件使用wp_enqueue_script加载，确保脚本加载的优先级和正确性：

function load_cqc_widget() {
  // 替换为需要显示Widget的页面ID或slug
  if (is_page('your-page-slug')) { 
    wp_enqueue_script(
      'cqc-widget-script',
      'https://www.cqc.org.uk/sites/all/modules/custom/cqc_widget/widget.js?data-id=1-13501952705&data-host=https://www.cqc.org.uk&type=provider',
      array(),
      null,
      true // 放在页脚加载，避免阻塞DOM渲染
    );
  }
}
add_action('wp_enqueue_scripts', 'load_cqc_widget');

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