window.addEventListener仅页面刷新后生效问题求助

核心问题分析 #

你猜的没错，问题确实出在.info元素的加载时机上。当前代码里的DOMContentLoaded事件触发时，页面静态DOM已加载完成，但你引入的runtime-es2015-container.js这类编译后运行时脚本（大概率是Vue/React这类框架的渲染脚本）可能还在动态生成.info元素——这时候document.querySelector('.info')根本找不到目标元素，哪怕加了100ms延迟也不稳定，脚本渲染慢一点就会失效。

另外你代码里还有个小语法错误：设置样式时把分号写成了冒号：

// 错误写法
envContainer.setAttribute('style', 'flex-direction:column:');
// 正确写法
envContainer.setAttribute('style', 'flex-direction:column;');

可行解决方案 #

方案1：用MutationObserver监听元素出现 #

这种方法能精准监听DOM变化，一旦.info被添加到页面就执行逻辑，比延迟更可靠：

window.addEventListener("DOMContentLoaded", function() {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(() => {
      const envContainer = document.querySelector('.info');
      if (envContainer) {
        // 找到元素后停止监听，避免重复执行
        observer.disconnect();
        // 推荐直接用style属性设置样式，比setAttribute更清晰
        envContainer.style.flexDirection = 'column';
        const envRow = document.createElement('div');
        envRow.classList.add('instance');
        envRow.innerText = 'some text ';
        envContainer.appendChild(envRow);
      }
    });
  });

  // 监听body下所有子节点的新增操作
  observer.observe(document.body, { childList: true, subtree: true });
});

方案2：把你的脚本放在所有运行时脚本之后 #

如果你的脚本最后加载，框架已经完成.info元素的渲染，直接执行代码即可，甚至不需要DOMContentLoaded：

<body>
<script src="runtime-es2015-container.js" type="module"></script>
<script src="runtime-es5-container.js" nomodule defer></script>
<script src="polyfils-es-5.js" defer></script>

<!-- 把你的脚本放在最后 -->
<script>
  // 0ms延迟让浏览器先处理完渲染队列
  setTimeout(() => {
    const envContainer = document.querySelector('.info');
    if (envContainer) { // 加判断避免找不到元素时报错
      envContainer.style.flexDirection = 'column';
      const envRow = document.createElement('div');
      envRow.classList.add('instance');
      envRow.innerText = 'some text ';
      envContainer.appendChild(envRow);
    }
  }, 0);
</script>
</body>

方案3：框架项目用生命周期钩子（如果适用） #

如果这是Vue/React这类框架构建的项目，更推荐在组件的生命周期钩子（比如Vue的mounted、React的useEffect）里添加DOM操作逻辑——框架会确保元素已经渲染完成，比全局脚本操作DOM更规范可靠。

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