检测何时加载iframe [英] Detect when an iframe is loaded

问题描述

我在我的应用程序（使用ExtJS 4.2的单页应用程序）中使用< iframe> （我知道，我知道......）文件下载，因为它们包含大量数据，并且可能需要一段时间才能生成Excel文件（根据参数，我们会在20秒到20分钟之间进行交谈）。

I'm using an <iframe> (I know, I know, ...) in my app (single-page application with ExtJS 4.2) to do file downloads because they contain lots of data and can take a while to generate the Excel file (we're talking anything from 20 seconds to 20 minutes depending on the parameters).

当前状态是：当用户点击下载按钮时，他被Javascript（ window.location.href = xxx ）重定向到执行该操作的页面导出，但由于它是在PHP中完成的，并且没有发送标题，浏览器会不断加载页面，直到文件被下载。但它不是非常用户友好，因为没有任何东西显示它是否仍在加载，完成（文件下载除外）或失败（这导致页面实际重定向，可能使他失去他正在做的工作）。

The current state of things is : when the user clicks the download button, he is "redirected" by Javascript (window.location.href = xxx) to the page doing the export, but since it's done in PHP, and no headers are sent, the browser continuously loads the page, until the file is downloaded. But it's not very user-friendly, because nothing shows him whether it's still loading, done (except the file download), or failed (which causes the page to actually redirect, potentially making him lose the work he was doing).

所以我创建了一个停靠在右下角的小型非模态窗口，其中包含iframe以及一条小消息以确保用户放心。我需要的是能够检测它何时被加载并且能够区分2种情况：

So I created a small non-modal window docked in the bottom right corner that contains the iframe as well as a small message to reassure the user. What I need is to be able to detect when it's loaded and be able to differenciate 2 cases :

• 无数据：OK =>关闭窗口


• 文本数据：错误消息=>向用户显示消息+关闭窗口

但是我尝试了所有4个活动（ W3Schools doc ）并且没有一个曾经被解雇。我至少可以理解，如果它不是返回的HTML数据，它可能无法触发事件，但即使我强制错误返回文本数据，它也不会被触发。

But I tried all 4 events (W3Schools doc) and none is ever fired. I could at least understand that if it's not HTML data returned, it may not be able to fire the event, but even if I force an error to return text data, it's not fired.

如果有人知道这方面的解决方案，或者可能适合这里的替代系统，我全都耳朵！谢谢！

If anyone know of a solution for this, or an alternative system that may fit here, I'm all ears ! Thanks !

编辑：添加了iframe代码。我们的想法是获得一个更好的方法来关闭它而不是 setTimeout 。

EDIT : Added iframe code. The idea is to get a better way to close it than a setTimeout.

var url = 'http://mywebsite.com/my_export_route';

var ifr = $('<iframe class="dl-frame" src="'+url+'" width="0" height="0" frameborder="0"></iframe>');
ifr.appendTo($('body'));

setTimeout(function() {
    $('.dl-frame').remove();
}, 3000);

推荐答案

我想知道是否需要对两者进行一些重大更改前端和后端代码，但你考虑过使用AJAX吗？工作流程将是这样的：用户发送AJAX请求以启动文件生成，并且前端不断地从服务器轮询它的状态，当它完成时 - 向用户显示下载链接。我相信工作流程会更直接。

I wonder if it would require some significant changes in both frontend and backend code, but have you considered using AJAX? The workflow would be something like this: user sends AJAX request to start file generating and frontend constantly polls it's status from the server, when it's done - show a download link to the user. I believe that workflow would be more straightforward.

嗯，你也可以尝试这个技巧。在父窗口中为iframe的完整加载创建回调函数 myOnLoadCallback ，然后使用从iframe调用它.parent.myOnLoadCallback（）。但你仍然需要使用 setTimeout 来处理服务器错误/连接超时。

Well, you could also try this trick. In parent window create a callback function for the iframe's complete loading myOnLoadCallback, then call it from the iframe with parent.myOnLoadCallback(). But you would still have to use setTimeout to handle server errors/connection timeouts.

最后一件事 - 如何你试图抓住iframe的事件吗？也许它与浏览器有关。您是否尝试过直接在HTML属性中设置事件回调？喜欢

And one last thing - how did you tried to catch iframe's events? Maybe it something browser-related. Have you tried setting event callbacks in HTML attributes directly? Like

<iframe onload="done()" onerror="fail()"></iframe>

这是一种不好的做法，我知道，但有时需要完成工作快，呃？

That's a bad practice, I know, but sometimes job need to be done fast, eh?

UPDATE
嗯，我担心你要花一个漫长而痛苦的一天与JS调试器。 加载事件应该工作。不过我还是有一些建议：

UPDATE Well, I'm afraid you have to spend a long and painful day with a JS debugger. load event should work. I still have some suggestions, though:

1）尝试在设置元素的 src 之前设置事件监听器。也许 onload 事件如此之快，以至于它在创建元素和设置事件的回调之间滑动

1) Try to set event listener before setting element's src. Maybe onload event fires so fast that it slips between creating element and setting event's callback

2）同时尝试检查您的服务器代码是否与iframe很好地匹配。我做了一个简单的测试，试图从Dropbox下载PDF，尝试用你支持的路由替换我的URL。

2) At the same time try to check if your server code plays nicely with iframes. I have made a simple test which attempts to download a PDF from Dropbox, try to replace my URL with your backed route's.

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<iframe id="book"></iframe>
<button id="go">Request downloads!</button>

<script>
    var bookUrl = 'https://www.dropbox.com/s/j4o7tw09lwncqa6/thinkpython.pdf';

    $('#book').on('load', function(){
        console.log('WOOT!', arguments);
    });

    $('#go').on('click', function(){
        $('#book').attr('src', bookUrl);
    });
</script>

更新2

3）另外，查看浏览器调试器的网络选项卡，将 src 设置为iframe时会发生什么情况，它应显示请求和服务器对标头的响应。

3) Also, look at the Network tab of your browser's debugger, what happens when you set src to the iframe, it should show request and server's response with headers.

这篇关于检测何时加载iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！