本地运行iframe与父页面通信遇跨域错误，求计数更新解决方案

问题根源 #

直接用file://协议打开本地文件时，浏览器会将父页面和iframe视为跨源（origin为null），触发同源策略限制，导致无法访问window.parent的函数。另外代码里还有几处逻辑错误需要修正。

解决方案步骤 #

1. 改用本地HTTP服务器运行，避免跨域 #

不要直接双击打开HTML文件，而是用本地HTTP服务器托管文件：

• Python 3：在文件目录下运行 python -m http.server 8000
• Node.js：先安装http-server（npm install -g http-server），然后运行http-server -p 8000
  之后在浏览器访问http://localhost:8000/count.html

2. 修正代码逻辑错误 #

修正后的script.js

window.addEventListener('DOMContentLoaded', () => {
    let rtemp = 0;
    let wtemp = 0;

    // 暴露给iframe的更新函数，直接更新变量和页面显示
    window.updateValueRight = function(plusR) {
        rtemp = plusR;
        document.getElementById("outputright").innerText = rtemp;
    };
    window.updateValueWrong = function(plusW) {
        wtemp = plusW;
        document.getElementById("outputwrong").innerText = wtemp;
    };
        
    // 初始化显示
    document.getElementById("outputright").innerText = rtemp;
    document.getElementById("outputwrong").innerText = wtemp;
        
    const refresh = document.getElementById("refresh");
    refresh.addEventListener("click", function() {
        document.getElementById("outputright").innerText = rtemp;
        document.getElementById("outputwrong").innerText = wtemp;
    });
});

• 关键：将updateValueRight和updateValueWrong挂载到window对象上，让iframe能访问到
• 去掉了不存在的rtemp元素操作，直接更新变量并同步页面显示

修正后的iframe.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <script defer>
        let r = 0;
        let w = 0;
    
        function right() {
            r++;
            window.parent.updateValueRight(r);
        }
        function wrong() {
            w++;
            // 修正：调用正确的updateValueWrong函数
            window.parent.updateValueWrong(w);
        }
        </script>
    </head>
    <body>
    <p>Are you cool?</p>
    <button id="right" onclick="right()">Yes</button>
    <button id="wrong" onclick="wrong()">No</button>
    <button class="btn">Maybe</button>
    </body>
</html>

• 修正wrong函数里的调用，从updateValueRight改为updateValueWrong

count.html无需修改，保持原内容即可

验证效果 #

启动本地服务器后，访问http://localhost:8000/count.html，点击iframe里的"Yes"/"No"按钮，父页面的计数会实时更新；点击Refresh按钮也会同步当前计数。

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