检测何时加载 iframe

Question

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

目前的情况是：当用户单击下载按钮时，他被 Javascript (window.location.href = xxx) “重定向”到执行导出的页面，但由于它是在 PHP 中完成的，并且没有发送任何标题，浏览器不断加载页面，直到文件被下载。但它对用户不是很友好，因为没有任何东西可以告诉他它是仍在加载、完成（除了文件下载）还是失败（这会导致页面实际重定向，可能会让他失去他正在做的工作）。

因此，我创建了一个停靠在右下角的小型非模态窗口，其中包含 iframe 以及一条小消息以安抚用户。我需要的是能够检测到它何时加载并能够区分两种情况：

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

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

如果有人知道这个问题的解决方案，或者可能适合这里的替代系统，我会全力以赴！谢谢！

编辑：添加 iframe 代码。我们的想法是获得比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);

Answer 1

也许你应该使用

$($('.dl-frame')[0].contentWindow.document).ready(function () {...})

Answer 2

我已经尝试过使用 jQuery，它工作得很好，正如你在这篇文章中看到的那样。

我做了一个工作示例here。

基本上是这样的：

<iframe src="http://www.example.com" id="myFrame"></iframe>

还有代码：

function test() {
    alert('iframe loaded');
}

$('#myFrame').load(test);

在 IE11 上测试。

Answer 3

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

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

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

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

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

更新 好吧，恐怕你不得不用一个 JS 调试器来度过漫长而痛苦的一天。 load 事件应该起作用。不过，我仍然有一些建议：

1) 尝试在设置元素的src 之前设置事件监听器。也许onload 事件触发得太快以至于它在创建元素和设置事件回调之间滑动

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

<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 时会发生什么情况，它应该显示请求和服务器的响应以及标头。

Answer 4

您可以使用this 库。为您准备的代码 sn-p 类似于：

window.onload = function () {
  rajax_obj = new Rajax('',
    {
        action : 'http://mywebsite.com/my_export_route', 
        onComplete : function(response) {
                //This will only called if you have returned any response 
               // instead of file from your export script
               // In your case 2
               // Text data : Error message => Display message to user
        }
    });
}

然后您可以在点击下载链接时拨打rajax_obj.post()。

<a href="javascript:rajax_obj.post()">Download</a>

注意：您应该在 PHP 脚本中添加一些标头，以便强制下载文件

header('Content-Disposition: attachment; filename="'.$file.'"');
header('Content-Transfer-Encoding: binary');

Answer 5

关于您的评论将获得更好的方法来关闭它而不是 setTimeout。您可以使用 jQuery fadeOut 选项或任何转换，并在“完成”回调中删除元素。下面是一个示例，您可以直接转储到小提琴中，并且只需要引用 jQuery。

我还将“加载”事件的侦听器包裹在侦听器中，以便在 iFrame 按照最初的问题加载之前不进行淡入淡出。

// plugin your URL here 
var url = 'http://jquery.com';

// create the iFrame, set attrs, and append to body 
var ifr = $("<iframe>") 
    .attr({
        "src": url, 
        "width": 300,
        "height": 100,
        "frameborder": 0 
    }) 
    .addClass("dl-frame")
    .appendTo($('body'))
;

// log to show its part of DOM 
console.log($(".dl-frame").length + " items found"); 

// create listener for load 
ifr.one('load', function() {
    console.log('iframe is loaded'); 

    // call $ fadeOut to fade the iframe 
    ifr.fadeOut(3000, function() {
        // remove iframe when fadeout is complete
        ifr.remove();  
        // log after, should no longer exist in DOM
        console.log($(".dl-frame").length + " items found");
    });  
}); 

Answer 6

试试这个：
注意：您应该在同一个域中。

var url = 'http://mywebsite.com/my_export_route',
    iFrameElem = $('body')
        .append('<iframe class="dl-frame" src="' + url + '" width="0" height="0" frameborder="0"></iframe>')
        .find('.dl-frame').get(0),
    iDoc = iFrameElem.contentDocument || iFrameElem.contentWindow.document;

$(iDoc).ready(function (event) {
    console.log('iframe ready!');
    // do stuff here
});

Answer 7

如果您正在从 iframe 下载文件，则加载事件不会触发 :) 我一周前正在这样做。此问题的唯一解决方案是调用带有标签的下载代理脚本，然后通过 cookie 返回该标签，然后加载文件。分钟，而你需要在页面上有一个 setInterval，女巫会监视那个特定的 cookie。

// Jst to clearyfy

var token = new Date().getTime(); // ticks
$('<iframe>',{src:"yourproxy?file=somefile.file&token="+token}).appendTo('body');

var timers = [];
timers[timers.length+1] = setInterval(function(){
var _index = timers.length+1;
 var cookie = $.cooke(token);
 if(typeof cookie != "undefined"){
  // File has been downloaded
   $.removeCookie(token);
   clearInterval(_index);
 }
},400);

在您的代理脚本中，将名称设置为字符串的 cookie 添加到发送的令牌 url 参数中。

Answer 8

如果您在服务器中控制生成 excel 的脚本或您发送到 iframe 的任何内容，为什么不放置一个 UID 标志并将其存储在值为 0 的会话中，所以...当创建 iframe 并且服务器脚本是调用只是将 UID 标志设置为 1，当脚本完成时（将加载 iframe）只需将其设置为 2。

然后你只需要一个计时器和一个定期的 AJAX 调用服务器来检查 UID 标志...如果它设置为 0 则进程不会启动，如果它是 1 则正在创建文件，最后如果它是 2该过程已结束。

你怎么看？如果您需要有关此方法的更多信息，请询问。

Answer 9

您所说的可以使用$(iframe).load(function() {...}); 为图像和其他媒体格式完成

对于 PDF 文件或其他富媒体，您可以使用以下库： http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/

注意：您将需要 JQuery UI

Answer 10

您可以使用以下脚本。它来自我的一个项目。

$("#reportContent").html("<iframe id='reportFrame' sandbox='allow-same-origin allow-scripts' width='100%' height='300' scrolling='yes' onload='onReportFrameLoad();'\></iframe>");

Answer 11

我想我会给其他人发布的更正确的做法提供一个更老套的替代方法。如果您可以控制 PHP 下载脚本，也许您可​​以在下载完成后简单地输出 javascript。或者可能重定向到运行 javascript 的 html 页面。 javascript 运行，然后可以尝试调用父框架中的某些内容。什么会起作用取决于您的应用是否在同一个域中运行

 

同域

同一域框架可以只使用框架javascript对象来相互引用。所以它可能是这样的，在你的单页应用程序中，你可以有类似的东西

window.downloadHasFinished=function(str){ //Global pollution. More unique name?
    //code to be run when download has finished
}

对于你下载的 php 脚本，你可以让它在完成后输出这个 html+javascript

<script>
if(parent && parent.downloadHasFinished)
    parent.downloadHasFinished("if you want to pass a data. maybe export url?")
</script>

• Demo jsfiddle（必须全屏运行，因为框架有不同的域）
• Parent jsfiddle
• Child jsfiddle

 

不同的域

对于不同的域，我们可以使用postMessage。因此，在您的单页应用程序中，它将类似于

$(window).on("message",function(e){
    var e=e.originalEvent
    if(e.origin=="http://downloadphp.anotherdomain.com"){ //for security
      var message=e.data //data passed if any
      //code to be run when download has finished
    }
});

在你的 php 下载脚本中你可以让它输出这个 html+javascript

<script>
parent.postMessage("if you want to pass data",
   "http://downloadphp.anotherdomain.com");
</script>

1. Parent Demo
2. Child jsfiddle

 

结论

老实说，如果其他答案有效，您可能应该使用这些答案。我只是觉得这是一个有趣的选择，所以我把它贴出来了。

Answer 12

试试这个（模式）

    $(function () {
        var session = function (url, filename) {
           // `url` : URL of resource
           // `filename` : `filename` for resource (optional)
            var iframe = $("<iframe>", {
                "class": "dl-frame",
                    "width": "150px",
                    "height": "150px",
                    "target": "_top"
            })
            // `iframe` `load` `event`
            .one("load", function (e) {
                $(e.target)
                    .contents()
                    .find("html")
                    .html("<html><body><div>" 
                          + $(e.target)[0].nodeName 
                          + " loaded" + "</div><br /></body></html>");
                alert($(e.target)[0].nodeName 
                        + " loaded" + "\nClick link to download file");
                return false
            });

            var _session = $.when($(iframe).appendTo("body"));
            _session.then(function (data) {
                var link = $("<a>", {
                        "id": "file",
                        "target": "_top",
                        "tabindex": "1",
                        "href": url,
                        "download": url,
                        "html": "Click to start {filename} download"
                });
                $(data)
                    .contents()
                    .find("body")
                    .append($(link))
                    .addBack()
                    .find("#file")
                    .attr("download", function (_, o) {
                      return (filename || o)
                    })
                    .html(function (_, o) {
                      return o.replace(/{filename}/, 
                      (filename || $(this).attr("download")))
                })

            });
            _session.always(function (data) {
                $(data)
                    .contents()
                    .find("a#file")
                    .focus()
                    // start 6 second `download` `session`,
                    // on `link` `click`
                    .one("click", function (e) {
                    var timer = 6;
                    var t = setInterval(function () {
                        $(data)
                            .contents()
                            .find("div")
                             // `session` notifications
                            .html("Download session started at " 
                                  + new Date() + "\n" + --timer);
                    }, 1000);
                    setTimeout(function () {
                        clearInterval(t);
                        $(data).replaceWith("<span class=session-notification>"    
                          + "Download session complete at\n" 
                          + new Date() 
                          + "</span><br class=session-notification />"
                          + "<a class=session-restart href=#>"
                          + "Restart download session</a>");
                        if ($("body *").is(".session-restart")) {
                            // start new `session`,
                            // on `.session-restart` `click`
                            $(".session-restart")
                            .on("click", function () {
                                $(".session-restart, .session-notification")
                                .remove() 
                                // restart `session` (optional),
                                // or, other `session` `complete` `callback` 
                                && session(url, filename ? filename : null)
                            })
                        };
                    }, 6000);
                });
            });
        };
        // usage
        session("http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf", "ECMA_JS.pdf")
    });

jsfiddle http://jsfiddle.net/guest271314/frc82/

Answer 13

我能想到两种解决方案。要么你有 PHP 将它的进度发布到一个 MySQL 表，从前端将使用 AJAX 调用提取信息以检查生成的进度。使用在访问页面时生成的某种唯一键对于同时生成 excel 文件的多人来说是理想的。

另一种解决方案是使用 nodejs，然后在 PHP 中使用 cURL 或套接字将 excel 文件的进度发布到 nodejs 服务。然后，当在 nodejs 中接收来自 PHP 的更新时，您只需为正确的套接字编写 excel 文件的进度。不过，这将切断一些浏览器支持。除非你使用外部库来为几乎所有浏览器和版本带来 websocket 支持。

希望这个答案有所帮助。我去年也有同样的问题。结束了 AJAX 轮询，让 PHP 即时发布进度。