在iframe中调用父级箭头函数提示‘不是函数’的原因探究

问题根源：全局作用域下的挂载规则不同 #

在浏览器全局作用域中，普通函数声明和箭头函数（变量声明）的处理逻辑存在本质区别：

• 普通函数声明：function a()这类函数声明会被自动挂载到全局对象（即浏览器中的window）上。所以iframe通过parent.a()调用时，实际访问的是parent.window.a，自然能找到对应的函数。
• 箭头函数（变量声明）：const b = () => {}是用const声明的变量，按照ES6+规范，let/const声明的全局变量不会自动成为window的属性。因此parent.b无法找到这个变量，就会抛出“is not a function”的错误。

你可以在父页面控制台验证这一点：打印window.a会返回对应的函数，而window.b的结果是undefined。

解决方法 #

如果需要让箭头函数能被iframe正常调用，只需手动将其挂载到window对象上：

window.b = () => {
    console.log("b");
};

修改后，iframe中的parent.b()就能正常执行。

测试代码 #

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>

    <body>
        <iframe></iframe>

        <script>
            function a() {
                console.log("a");
            }
            const b = () => {
                console.log("b");
            };
            // 可选：手动挂载到window让iframe可访问
            // window.b = b;
        </script>

        <script type="text/javascript">
            let ascript =
                "<scr" + 'ipt type="text/javascript">parent.a();</scr' + "ipt>";
            $("iframe").contents().find("body").append(ascript);
            let bscript =
                "<scr" + 'ipt type="text/javascript">parent.b();</scr' + "ipt>";
            $("iframe").contents().find("body").append(bscript);
        </script>
    </body>
</html>

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