如何在iframe内直接获取自身document对象，无需查找iframe

当你的脚本运行在iframe内部时，它的默认作用域就是该iframe的全局环境，完全不需要从父文档查找iframe元素。直接使用document或window.document就能获取当前iframe的文档对象，这是最直接的方式。

原理说明 #

每个iframe都拥有独立的全局上下文（window对象），在iframe内部执行的脚本，其默认的document、window都是指向当前iframe自身的，而非父页面的全局对象。只有当你主动访问parent.document或top.document时，才会获取到父页面或顶层页面的文档。

示例代码 #

内嵌脚本在iframe中 #

<!-- 这是iframe内部的HTML文件内容 -->
<!DOCTYPE html>
<html>
<body>
  <div id="content">我是iframe里的内容</div>
  <script>
    // 直接操作当前iframe的document，无需查找iframe
    document.getElementById('content').style.color = 'blue';
    // 也可以显式使用window.document，效果一致
    window.document.body.style.padding = '20px';
  </script>
</body>
</html>

外部脚本文件加载到iframe中 #

如果你的脚本是外部文件（比如iframe-script.js），直接在iframe中引入后，脚本里的document同样指向当前iframe：

// iframe-script.js 内容
// 直接操作当前iframe的文档
document.title = '我的独立iframe';
const iframeBody = document.querySelector('body');
iframeBody.style.backgroundColor = '#f5f5f5';

避免混淆父页面对象 #

如果需要区分当前iframe和父页面的全局对象，可以：

• document / window.document：当前iframe的文档
• parent.document：父页面的文档
• top.document：顶层页面的文档（当存在多层iframe嵌套时）

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