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

时间:2016-06-27 15:05:33

标签: javascript iframe

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

因为我有多个网页需要一起打印而我无法控制将要提供的内容,所以我认为最好在iframe中加载所有内容(主要是因为许多文档包含脚本和样式如果简单地一起扔到页面上就会污染其余的......)

因为iframe不灵活,我找到了唯一的方法来确定我的iframe需要的大小,我必须自己渲染每个web文档并记录高度,然后将每个文档呈现在iframe中,其高度为我最初记录了。

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

public class Worker implements Runnable
{
    private final CountDownLatch doneSignal;
    private final String URL;

    Worker (CountDownLatch doneSignal, String URL)
    {
        this.doneSignal = doneSignal;
        this.URL = URL;
    }

    @Override
    public void run ()
    {
        try
        {
            // Run the command line process to download
            ProcessBuilder pb =
                new ProcessBuilder("git", "clone", "--depth=1", URL, "projects/" + getProjectName(URL));
            Process p = pb.start();
            p.waitFor();
        }
        catch (Exception e)
        {
            e.printStackTrace();
        }

        doneSignal.countDown();
    }
}

当我点击

时会出现问题
var body = popWindow.document.createElement("body");
var iframe = popWindow.document.createElement("iframe");

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

iframe已实例化,但contentDocument似乎为null。我试图等待这个内容加载,但它只是坐着并无限循环。

2 个答案:

答案 0 :(得分:1)

您可以使用jQuery等待加载帧,然后他们就可以完成您的工作。

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

编辑:仅使用javascript

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

答案 1 :(得分:0)

您可以将事件监听器附加到iframe的窗口:

iframe.window.addEventListener('load', function(){ ...