如何使用JS实现同站点iframe关闭按钮控制父页面过渡

以下是你代码里存在的明确问题，按排查优先级排序：

• 选择器语法错误，关闭按钮根本没被选中
  代码里写的document.querySelector("# close_btn")，在id选择器的#符号和id值close_btn之间多了一个空格。按照CSS选择器规则，空格代表后代元素匹配，这段选择器实际是在查找无id的元素下嵌套的、id为close_btn的子元素，永远匹配不到目标关闭按钮，点击事件从一开始就没有绑定成功。
  正确写法需要删掉多余空格：document.querySelector("#close_btn")
• JS执行上下文隔离，第一版代码从机制上就访问不到主页面元素
  即使修正了选择器问题，iframe和主页面的JS执行上下文是完全独立的，两个页面的全局作用域互不连通。你在iframe代码里直接写的write、dimming变量，根本无法读取到主页面上的对应DOM元素，运行到这两行代码时浏览器会直接抛出未定义变量的报错，后续逻辑完全无法执行。
• 类名匹配逻辑错误
  第二版代码里，针对主页面的.write-dimming元素，错误添加了write-off类，和你最初设计的write-dimming-off类名不一致，就算DOM节点选择正确，对应的隐藏显示逻辑也不会正常触发。
• 时序问题排查
  修正以上语法问题后如果仍不生效，需要检查脚本的执行时机：确保iframe内的绑定逻辑是在关闭按钮DOM节点渲染完成后执行，不要把绑定脚本写在DOM结构加载之前，导致选择器拿不到目标节点。

修正后的可用参考代码 #

// 等iframe内部DOM加载完成后再执行绑定逻辑，规避时序问题
document.addEventListener('DOMContentLoaded', () => {
    // 修正选择器的空格问题，正确选中关闭按钮
    const closeBtn = document.querySelector("#close_btn");
    // 找不到目标按钮直接退出，避免不必要的报错
    if (!closeBtn) return;

    closeBtn.onclick = function () {
        // 同站场景下，允许通过window.parent直接获取父页面的文档对象
        const parentDoc = window.parent.document;
        parentDoc.querySelector(".write")?.classList.add("write-off");
        // 修正类名不匹配的问题
        parentDoc.querySelector(".write-dimming")?.classList.add("write-dimming-off");
    }
})

补充说明：同站场景下直接通过window.parent访问父页面DOM是符合浏览器安全规则的，不需要额外配置权限。如果后续需要松耦合的通信逻辑，可以替换为postMessage跨页面传值的实现方式，避免直接硬操作DOM带来的维护成本。

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