嵌入iFrame时getElementById/QuerySelector失效问题排查

问题场景 #

作为SSO提供商，我们在生产环境遇到异常：当我方登录页被第三方网站通过iFrame加载时，页面内部脚本中的getElementById('content')返回null，导致无法修改元素样式；但直接在浏览器访问登录页时，相同代码在控制台执行能正常获取元素。脚本位于iFrame加载的文档内部，并非父页面脚本。

相关代码如下：

<body>
  <script>
    if (window.parent != window) {
      window.document.getElementById('content').style.padding = '0';
    }
  </script>
  <div class="container">
    <main id="content" class="flex-column">
       <div class="sib-login-title">
         You need to login to access this page
       </div>
    </main>
  </div>
</body>

直接访问时控制台执行结果正常：

window.document.getElementById("content");
// 返回 <main id="content" class="flex-column">

iFrame加载时触发错误：

Uncaught TypeError: Cannot read properties of null (reading 'style')

排查思路 #

• 优先排查DOM加载时序问题：脚本放在<body>最顶部，此时#content元素还未被浏览器解析渲染，直接调用getElementById必然返回null。直接访问时在控制台执行是DOM完全加载后的操作，所以能正常获取。iFrame加载时的渲染时序可能和直接访问有差异（比如第三方页面的加载优先级影响iFrame的DOM解析），导致脚本执行时元素确实不存在。
  解决方式：将脚本移到</body>闭合标签前，或者用DOMContentLoaded事件包裹逻辑，确保DOM加载完成后再执行：

  document.addEventListener('DOMContentLoaded', function() {
    if (window.parent !== window) {
      const contentEl = document.getElementById('content');
      if (contentEl) contentEl.style.padding = '0';
    }
  });
  

• 检查第三方的iFrame嵌入属性：确认第三方嵌入iFrame时是否添加了sandbox属性，部分sandbox组合（比如仅设置allow-scripts）可能会限制脚本对DOM的访问时机，或者影响DOM解析流程。可以让第三方检查嵌入代码，尝试调整sandbox权限（如添加allow-same-origin）验证是否解决问题。

• 验证iFrame内DOM的实际状态：当iFrame加载完成后，在浏览器控制台切换到iFrame的上下文，手动执行document.getElementById('content')，确认元素是否存在。如果此时能获取到元素，说明完全是脚本执行时机的问题；如果仍然获取不到，再排查是否有动态DOM修改（比如页面其他脚本删除了该元素）、ID冲突或浏览器缓存的旧页面资源问题。

• 浏览器安全策略差异验证：尝试在不同浏览器中复现问题，部分浏览器对iFrame的隔离机制可能导致脚本执行时序不同。如果仅在特定浏览器出现问题，可以针对性查阅该浏览器的iFrame相关安全文档，确认是否有特殊限制。

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