修改iframe的src后无法调用内部脚本函数的问题求助

核心问题 #

修改iframe的src后，新页面尚未完成加载就直接调用contentWindow.printReport()，此时页面内的脚本还未执行，自然找不到该函数。

具体解决方法 #

1. 等待iframe加载完成后再调用函数

必须监听iframe的load事件，确保新页面的脚本完全初始化后再执行函数调用。修改viewReport函数如下：

function viewReport(useV2) {
    const iframe = document.getElementById("the-frame");
    const targetSrc = useV2 ? "/indexv2.html" : "/index.html";

    // 仅当目标src与当前src不同时才更新，避免重复加载
    if (iframe.src !== targetSrc) {
        // 先移除旧的load监听器，防止重复触发
        iframe.removeEventListener('load', handleIframeLoad);
        // 添加新的监听器
        iframe.addEventListener('load', handleIframeLoad);
        iframe.src = targetSrc;
    } else {
        // 页面已加载完成，直接调用
        iframe.contentWindow.printReport();
        closePrintOptions();
    }

    // 加载完成后的回调函数
    function handleIframeLoad() {
        iframe.removeEventListener('load', handleIframeLoad);
        iframe.contentWindow.printReport();
        closePrintOptions();
    }
}

2. 确认indexv2.html的函数处于全局作用域

虽然你说代码几乎一致，但仍需确保printReport是挂载到window对象的全局函数：

• 检查indexv2.html中的脚本是否被包裹在局部作用域（比如(function(){})()）内，这种情况下函数不会暴露到全局。
• 可以显式将函数挂载到window：

<!-- indexv2.html 的脚本部分 -->
<script>
    // 显式声明全局函数
    window.printReport = function() {
        alert('456');
    };
</script>

3. 验证sandbox权限与同源性

• 确认indexv2.html与父页面同源（协议、域名、端口一致），否则即使sandbox设置了allow-same-origin也无法访问contentWindow。
• 检查sandbox属性是否包含allow-scripts（你当前的设置已经包含，这一步主要是排除修改src时误改属性的可能）。

4. 额外优化：避免重复加载相同页面

如果多次调用viewReport且useV2状态未变，重复设置src会导致页面重新加载，既浪费资源又容易引发加载未完成的问题，上面的代码已经包含了这层判断。

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