如何让iframe中来自父页面的函数通过instanceof Function校验？

问题原因 #

主页面与iframe属于不同的JavaScript执行上下文，各自拥有独立的Function构造函数实例。当你把主页面的test函数直接赋值给iframe的contentWindow.test时，这个函数的原型链指向主页面的Function.prototype，而Blazor的findJsFunction里用的是iframe自身的Function做校验，自然会返回false。

可行解决方案 #

核心思路是：在iframe的执行上下文内创建一个包装函数，让这个包装函数调用主页面的原函数，这样window.test就属于iframe自身的函数，instanceof Function校验会通过。

调整主页面代码 #

利用iframe的onload事件，在iframe加载完成后，向其contentWindow注入一个iframe上下文的包装函数：

<iframe id="myFrame" src="url"></iframe>
<script>
    function test() {
        console.info('test');
    }
    const iframe = document.querySelector('#myFrame');
    iframe.onload = () => {
        // 在iframe上下文创建包装函数，内部调用主页面的test
        iframe.contentWindow.test = function() {
            parent.test();
        };
    };
</script>

无需修改iframe现有代码 #

原iframe中的findJsFunction和按钮逻辑保持不变即可，此时点击按钮时，window.test是iframe自身的函数，instanceof Function会返回true，进而成功执行主页面的test函数。

为什么你之前的方案无效 #

1. 手动设置函数原型：跨上下文的Function.prototype是不同的对象，修改原型链无法让主页面的函数通过iframe的instanceof Function校验。
2. 直接用parent.test调用：Blazor的findJsFunction无法修改，必须让window[name]指向符合校验的函数，此方案不符合要求。
3. 先定义再覆盖：覆盖后window.test依然是主页面的函数，本质还是跨上下文对象，校验依然失败。

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