javascript - 如何仅使用 javascript 等待 iframe 内容加载

Question

我正在尝试为网站创建打印功能，将网页动态加载到弹出窗口中。整个情况有点奇怪，所以我将解释我到底在做什么，如果有人对我如何以更有效的方式完成此过程有任何建议，我洗耳恭听。

因为我有多个网页需要一起打印，并且我无法控制将提供哪些内容，所以我决定最好将所有内容加载到 iframe 中(主要是因为许多文档包含脚本和样式)如果简单地把它们一起扔到一页上，就会污染其余部分......)

因为 iframe 不灵活，我发现唯一的方法来计算 iframe 需要的大小，我必须单独渲染每个 Web 文档并记录高度，然后在 iframe 中渲染每个文档，其高度为我最初录制的。

到目前为止，我已经准备好在单个页面上渲染每个 iframe，并使用以下代码创建一个新的 iframe 元素。

var body = popWindow.document.createElement("body");
var iframe = popWindow.document.createElement("iframe");

iframe.contentDocument.open();
iframe.contentDocument.write(data);
iframe.contentDocument.close();

当我点击时出现问题

iframe.contentDocument.open();

iframe 已实例化，但 contentDocument 似乎为 null。我尝试等待此内容加载，但它只是无限循环。

Answer 1

您可以使用 jQuery 等待框架加载，然后它们会完成您的工作。

$("#your-frame").load(function () {
    //frames["your-frame"]
});

编辑:仅使用 JavaScript

var yourFrame = document.getElementById('your-frame'); 
    yourFrame.addEventListener("load", function() { 
});