点击触发iframe显示后，为何获取的iframe对象始终为null？

第一段代码的核心问题 #

点击菜单后，目标iframe是动态添加到DOM中的，但你是同步执行document.getElementById——此时浏览器还没完成iframe的渲染与插入操作，自然获取不到元素，返回null。

第二段代码的额外错误 #

1. 变量名拼写错误：你定义的变量是output_window，但监听时写成了output_windows，直接导致报错，MutationObserver根本无法生效。
2. 监听对象错误：你要获取的iframe在当前页面，却监听了新打开的output_window的body，完全盯错了地方。
3. window.onload时机问题：书签工具（bookmarklet）是在页面加载完成后才运行的，此时window.onload事件早已触发，你的回调函数不会执行，菜单点击和监听逻辑都没实际运行。

修复方案示例 #

针对动态加载的iframe，应使用MutationObserver监听当前页面的DOM变化，在iframe被添加后再获取它：

javascript: (() => {
  // 监听当前页面body的子元素变化
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 检查新增节点里有没有目标iframe
      const iframe = document.getElementById("iframe_of_interest");
      if (iframe) {
        console.log("找到目标iframe", iframe);
        observer.disconnect(); // 找到后停止监听
        // 在这里编写对iframe的后续操作
      }
    });
  });

  // 配置监听规则：监听子元素变化，包含子树
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });

  // 触发菜单点击，触发iframe加载
  const click_on_menu = document.getElementById("你的菜单元素ID");
  if (click_on_menu) click_on_menu.click();
})();

注意：需将"你的菜单元素ID"替换为实际的菜单元素ID，确保click_on_menu能正确获取到目标按钮。

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