退出WordPress后JavaScript无法加载的问题求助

问题背景 #

通过Elementor将<script src="https://www.fourvenues.com/assets/iframe/"></script>嵌入WordPress站点后，登录状态下显示正常，但退出登录后控制台抛出错误：

Uncaught TypeError: Cannot read properties of null (reading 'style') at createIframe (events:45:11) at script.onload (events:36:7)

尝试过DOMContentLoaded解决DOM未加载问题，但无效，问题演示页面：https://millennialwave.es/fv/

错误核心原因 #

这个错误本质是Fourvenues的脚本试图操作某个DOM元素的style属性，但该元素在退出登录状态下找不到（返回null）。差异出现的关键原因：

• 登录状态下WordPress默认禁用缓存，页面实时渲染；退出后缓存插件生效，可能打乱了DOM元素与脚本的加载顺序，或缓存后的页面丢失了脚本依赖的目标元素。
• Elementor在登录/退出状态下的页面生成逻辑有细微差异，导致脚本依赖的DOM元素未正确输出。

解决步骤 #

• 确认目标DOM元素存在：用浏览器开发者工具（F12）查看退出登录后的页面源码，对比登录状态下的页面结构，确认脚本要找的容器元素（特定ID或类名）是否存在。如果元素丢失，检查是否是Elementor模块在非登录状态下被隐藏，或主题/插件修改了页面结构。
• 重新封装脚本加载逻辑：放弃直接插入外部脚本，改用DOM完全就绪后再加载的方式，代码如下：

  document.addEventListener('DOMContentLoaded', function() {
    const fvScript = document.createElement('script');
    fvScript.src = 'https://www.fourvenues.com/assets/iframe/';
    fvScript.async = false; // 改为同步加载，确保脚本执行时DOM已就绪
    document.body.appendChild(fvScript);
  });
  

  将这段代码通过Elementor的「自定义代码」功能插入到</body>之前，比直接在页面编辑器中插入更可靠。
• 排查缓存插件影响：临时禁用站点的缓存插件（比如WP Rocket、W3 Total Cache等），测试退出登录后是否正常。如果恢复正常，进入缓存插件设置，将Fourvenues的脚本排除在延迟加载、脚本合并等优化规则外，避免缓存逻辑干扰脚本执行。
• 检查Elementor权限设置：如果页面用了Elementor的动态模块，确认非登录用户有权限查看该模块，避免模块被隐藏导致脚本依赖的DOM元素消失。

内容的提问来源于stack exchange，提问作者Luis Loaiza Ventosa