Question

假设我们有以下HTML文件：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test iframe download</title>
<script type="text/javascript">

var init = 0;

function download() {
  document.getElementById("dload_frame").src = "http://example.com/dload.py";
}

function alert() {
  if (init == 0) {
    init = 1;
  }
  else {
    document.getElementById("alert_span").innerHTML = "Got it!";
  }
}

</script>
</head>
<body>

  <span id="alert_span">Main content.</span><br/>
  <input type="button" value="Download" id="btn" onclick="download()" />
  <iframe id="dload_frame" src="http://404.com/404" onload="alert()"> </iframe>

</body>
</html>

现在，如果iframe的src被重写到的URL（在这种情况下 - “http://example.com/dload.py”）返回HTML，没问题：onload事件触发，span的内容被替换，每个人都很高兴。 / p>

但是，如果URL返回的文件的内容类型设置为强制浏览器打开保存文件对话框的内容，则iframe的onload事件永远不会触发。

有没有解决方法？使用iframe不是必需的，所需的行为是在浏览器开始下载提供的文件后启动回调。

Answer 1

我遇到了同样的问题：这是我的解决方法，请看看它是否适合您：

<script>
 function download(){
    var url = 'http://example.com/dload.py';
    var htm = '<iframe src="' + url +'" onload="downloadComplete()"></iframe>';
    document.getElementById('frameDiv').innerHTML = htm;
 }
</script>

<div style="display:none" id="frameDiv">
</div>
<button onclick="download()">download file</button>

据我所知，iframe的onload事件只触发一次。为src属性设置另一个值不会导致onload事件再次触发。

Answer 2

我的解决方案经过许多不同的方法来实现这个工作跨越ff即safari和chrome没有2步下载。

创建iframe的原始JS请求加载通常已加载pdf的src 但是，src现在加载一个页面，其中包含另一个iframe，现在包含pdf的url。在html响应中，我触发了onload，还有一个catchall setTimeout函数，它在window.parent.window.handlerfunction上调用我的响应，我在onrame上的onload就是这样。结果是PDF下载和处理程序函数的顶级父级的触发器，它在浏览器中起作用，因为它不再依赖于检测实际的iframe负载，而是依赖于支持的父/子窗口关系。

希望这可以帮助那些陷入困境的人

Answer 3

我有同样的问题，onLoad处理程序只在内容发生变化时触发。如果您下载文件。如果删除HTTP标头以在iframe上打印文件内容，则onload正确触发。

Answer 4

您可以在很短的时间间隔后重复检查iframe readyState属性，直到它完成。

function iframe_onload(iframe_id, js) {
    var iframe = document.getElementById(iframe_id);
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

    if (iframeDoc.readyState == 'complete') {
        eval(js)
        return;
    }

    window.setTimeout('iframe_onload("' + iframe_id + '",`' + js + '`);', 100);
}

Answer 5

你可能需要jquery的帮助，例如你可以这样做：

$.get('http://example.com/dload.py',{},function(result){
   $('alert_span').html(result);//or some content
});

如何在iframe中下载文件时触发onload事件？

5 个答案: