当url生成PDF输出时,Iframe onload不工作
iframe onload not working when url generates pdf ouput
我有一个生成PDF文件的URL。对于生成PDF,我使用iframe来加载该url并在同一页面为用户生成PDF文件。
当用户点击按钮时,屏幕上会显示loader
。它应该隐藏当iframe加载完成(当PDF下载弹出)。我使用下面的代码,但它不工作,loader
仍然显示后下载弹出打开(如果我改变url与任何其他像google.com然后它将工作)。
这是我的代码片段。
$("#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
加载完成后,需要隐藏div ajax_loading
。我做错什么了吗?还有其他解决办法吗?
您可以使用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在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);
}
}
相关文章:
- 在IFrame中对jsp的onload是将IFrame设置为整个页面/浏览器
- iFrame onload JavaScript event
- 如果iframe在src(pdf或text)中有非html文档,则iframe中的onload不起作用
- 在iframe中禁用onload函数的Javascript
- 异步表单w/Iframe Target——OnLoad适用于FF、Chrome、IE9,不适用于;无法在IE7中得到响应
- 如何在 iFrame 的 onload 事件中执行代码
- iframe 中的 onload 事件仅触发一次
- Chrome iframe:window.open 不适用于 onload handler
- iframe上的onload事件在IE和Firefox / GoogleChrome中的工作方式不同
- Jquery Iframe onload事件未在Google chrome上执行
- JQuery Onload refresh iframe
- 如何在asp.net中获取iframe onload事件
- IFRAME中的SRC属性随onload函数而变化
- 通过ajax动态生成的iframe的onload事件在IE中没有触发
- Firefox没有为动态嵌套iframe启动onload
- Form OnLoad事件,将图像存储并显示在iframe上
- Iframe onload函数未定义
- 当url生成PDF输出时,Iframe onload不工作
- Safari没有'当src不是有效的站点时,不要调用iframe-onload
- 专注于 iFrame onLoad 中的元素