Iframe源修改后脚本失效怎么解决

在使用Iframe时，动态修改`src`属性后，父页面立即访问Iframe内部脚本可能导致`undefined`错误。这是因为Iframe内容加载是异步的，新的文档和脚本尚未完全加载。本文针对这一问题，深入剖析了Iframe动态加载的机制，并提供了一种有效的解决方案：利用Iframe的`onload`事件，确保在Iframe内容加载完成后再进行脚本交互。通过监听`onload`事件，可以避免因脚本未加载而导致的错误，实现父页面与Iframe内脚本的正确通信。本文还探讨了同源策略、错误处理、用户体验和`sandbox`属性等相关注意事项，助您更好地理解和解决Iframe动态加载问题。

当动态改变`

理解Iframe动态加载的挑战

在使用HTML

index.html 或 indexv2.html 内部脚本：

父页面尝试调用：

function viewReport(useV2) {
    const iframe = document.getElementById("the-frame");

    // 如果取消注释此行，printReport() 将变为 undefined
    // if (useV2)
    //    iframe.src = "/indexv2.html"; // 动态改变src

    iframe.contentWindow.printReport(); // 此时可能报错
    closePrintOptions();
}

当iframe.src被修改为/indexv2.html后，如果父页面立即执行iframe.contentWindow.printReport()，就会遇到printReport is undefined的错误。这是因为在iframe.src改变的那一刻，浏览器开始加载新的文档，但这个过程需要时间。在新的文档加载并执行其脚本之前，contentWindow对象尚未更新以反映新文档的全局环境。

解决方案：利用iframe.onload事件

解决这个问题的关键在于确保在父页面尝试与