url生成pdf输出时iframe onload不起作用
Posted
技术标签:
【中文标题】url生成pdf输出时iframe onload不起作用【英文标题】：iframe onload not working when url generates pdf ouput 【发布时间】：2015-12-10 13:01:47 【问题描述】：我有一个生成 PDF 文件的 URL。为了生成 PDF，我使用 iframe 加载该 url 并在同一页面为用户生成 PDF 文件。
当用户点击按钮时，它会在屏幕上显示loader。并且当 iframe 加载完成时（当 PDF 下载弹出时）它应该被隐藏。我使用了下面的代码，但它不工作，loader 在下载弹出窗口打开后仍然显示（如果我用任何其他类似 google.com 的 URL 更改它就会工作）。
这是我的代码 sn-p。
$("#test").click(function()
iframe = document.getElementById("download-container1");
if (iframe === null)
$("#ajax_loading").show();
var url="http://test.coachfxlive.com/ajax/ajax-action.php?type=s&vid=0&playlist_id=11&perpage=1&action=get_profile";
iframe = document.createElement('iframe');
iframe.id = "download-container1";
document.body.appendChild(iframe);
$('#download-container1').load(function ()
$("#ajax_loading").hide();
);
iframe.src=url;
);.ajax_loading
background-color: rgba(0, 0, 0, 0.7);
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99999;
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="ajax_loading" id="ajax_loading"><span>Please Wait... Loading</span></div>
<button id="test">click</button>
</body>
</html>iframe加载完成后，需要隐藏divajax_loading。
我在这里做错什么了吗？还有其他解决办法吗？
提前致谢。
【问题讨论】：
【参考方案1】：您可以使用readystate iframe 属性来检查 iframe 是否已完全加载。但是，如果内容是二进制文件，这在 Chrome 中不起作用。
一旦设置了 iframe url，它就会每秒检查一次 iframe 的 readystate 属性：
$("#test").click(function()
iframe = document.getElementById("download-container1");
if (iframe === null)
$("#ajax_loading").show();
var url="http://test.coachfxlive.com/ajax/ajax-action.php?type=s&vid=0&playlist_id=11&perpage=1&action=get_profile";
iframe = document.createElement('iframe');
iframe.id = "download-container1";
document.body.appendChild(iframe);
//$('#download-container1').load(function ()
// $("#ajax_loading").hide();
//);
iframe.src=url;
checkFinishedDownload(iframe);
);
function checkFinishedDownload(ifr)
if (ifr.readyState == "complete" || ifr.readyState == "interactive")
// Here hide the spinner
$("#ajax_loading").hide();
else
setTimeout(function ()
checkFinishedDownload(ifr);
, 1000);
检查我的问题：Iframe.readyState does not work in chrome
编辑：
在 Firefox 中，您可以使用 onload 事件：
function checkFinishedDownload(ifr)
if ($.browser.mozilla)
ifr.onload = function ()
$("#ajax_loading").hide();
else
iframeCheck(ifr);
function iframeCheck(iframe)
if (iframe.readyState == "complete" || iframe.readyState == "interactive")
// Here hide the spinner
$("#ajax_loading").hide();
else
setTimeout(function ()
checkFinishedDownload(iframe);
, 1000);
【讨论】：
我在 Firefox 中尝试过同样的事情，但对我不起作用。 请检查我编辑的答案。在 Firefox 中，您有onload 事件。您必须将其附加到 iframe dom 元素上。
有 safari 和 chrome 的解决方案吗？以上是关于url生成pdf输出时iframe onload不起作用的主要内容，如果未能解决你的问题，请参考以下文章
如何从动态生成的 iframe 中删除 onload 事件？
使用 Weasyprint 的 PDF 输出不显示图像（Django）