当 iframe 在 jQuery 中加载完成时,如何触发事件?
-
09-06-2019 - |
题
我必须在页面中加载 PDF。
理想情况下,我希望有一个正在加载的动画 gif,一旦 PDF 加载完毕,它就会被替换。
解决方案
我非常确定这是不可能的。
除了 PDF 之外,几乎任何其他东西都可以使用,甚至包括 Flash。(在 Safari、Firefox 3、IE 7 上测试)
太糟糕了。
其他提示
你有没有尝试过:
$("#iFrameId").on("load", function () {
// do something once the iframe is loaded
});
这对我来说是这样的(不是pdf,而是另一个“onload
抗性”内容):
<iframe id="frameid" src="page.aspx"></iframe>
<script language="javascript">
iframe = document.getElementById("frameid");
WaitForIFrame();
function WaitForIFrame() {
if (iframe.readyState != "complete") {
setTimeout("WaitForIFrame();", 200);
} else {
done();
}
}
function done() {
//some code after iframe has been loaded
}
</script>
希望这可以帮助。
我正在尝试这个,似乎对我有用:http://jsfiddle.net/aamir/BXe8C/
更大的 pdf 文件:http://jsfiddle.net/aamir/BXe8C/1/
$("#iFrameId").ready(function (){
// do something once the iframe is loaded
});
你试过.ready吗?
我尝试了一种开箱即用的方法,我还没有针对 PDF 内容测试过这种方法,但它确实适用于基于普通 HTML 的内容,具体方法如下:
步骤1: :将您的 Iframe 包装在 div 包装中
第2步: :将背景图像添加到您的 div 包装中:
.wrapperdiv{
background-image:url(img/loading.gif);
background-repeat:no-repeat;
background-position:center center; /*Can place your loader where ever you like */
}
步骤3: :在你的 iframe 标签中添加 ALLOWTRANSPARENCY="false"
这个想法是在包装器 div 中显示加载动画,直到 iframe 加载后,iframe 将覆盖加载动画。
试一试。
当 iframe 真正准备好时,使用 jquery Load 和 Ready 似乎都不太匹配。
我最终做了这样的事情
$('#iframe').ready(function () {
$("#loader").fadeOut(2500, function (sender) {
$(sender).remove();
});
});
其中 #loader 是 iframe 顶部的绝对定位 div,带有旋转 gif。
@Alex 噢,这真是太糟糕了。如果在你的 iframe
你有一个 html 文档,如下所示:
<html>
<head>
<meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
</head>
<body>
</body>
</html>
绝对是一个 hack,但它可能适用于 Firefox。尽管我想知道在这种情况下加载事件是否会过早触发。
以下是我对任何操作所做的操作,它适用于 Firefox、IE、Opera 和 Safari。
<script type="text/javascript">
$(document).ready(function(){
doMethod();
});
function actionIframe(iframe)
{
... do what ever ...
}
function doMethod()
{
var iFrames = document.getElementsByTagName('iframe');
// what ever action you want.
function iAction()
{
// Iterate through all iframes in the page.
for (var i = 0, j = iFrames.length; i < j; i++)
{
actionIframe(iFrames[i]);
}
}
// Check if browser is Safari or Opera.
if ($.browser.safari || $.browser.opera)
{
// Start timer when loaded.
$('iframe').load(function()
{
setTimeout(iAction, 0);
}
);
// Safari and Opera need something to force a load.
for (var i = 0, j = iFrames.length; i < j; i++)
{
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
}
else
{
// For other good browsers.
$('iframe').load(function()
{
actionIframe(this);
}
);
}
}
</script>
当 iFrame 中的 pdf 加载时,我必须显示一个加载器,所以我想出了:
loader({href:'loader.gif', onComplete: function(){
$('#pd').html('<iframe onLoad="loader.close();" src="pdf" width="720px" height="600px" >Please wait... your report is loading..</iframe>');
}
});
我正在展示一个装载机。一旦我确定客户可以看到我的加载程序,我就会调用加载 iframe 的 onCompllet 加载程序方法。Iframe 有一个“onLoad”事件。加载 PDF 后,它会触发 onloat 事件,我将在其中隐藏加载器:)
重要部分:
iFrame 有“onLoad”事件,您可以在其中执行您需要的操作(隐藏加载程序等)
如果您可以预期下载完成后会为用户弹出浏览器的打开/保存界面,那么您可以在开始下载时运行以下命令:
$( document ).blur( function () {
// Your code here...
});
当页面顶部弹出对话框时,将触发模糊事件。
由于pdf文件加载后,iframe文档将有一个新的DOM元素 <embed/>
, ,所以我们可以这样进行检查:
window.onload = function () {
//creating an iframe element
var ifr = document.createElement('iframe');
document.body.appendChild(ifr);
// making the iframe fill the viewport
ifr.width = '100%';
ifr.height = window.innerHeight;
// continuously checking to see if the pdf file has been loaded
self.interval = setInterval(function () {
if (ifr && ifr.contentDocument && ifr.contentDocument.readyState === 'complete' && ifr.contentDocument.embeds && ifr.contentDocument.embeds.length > 0) {
clearInterval(self.interval);
console.log("loaded");
//You can do print here: ifr.contentWindow.print();
}
}, 100);
ifr.src = src;
}
我针对这种情况采用的解决方案是简单地在 DOM 中放置一个绝对加载图像,该图像在 iframe 加载后将被 iframe 层覆盖。
iframe 的 z-index 应该是(加载的 z-index + 1),或者更高。
例如:
.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }
如果没有 JavaScript 解决方案,希望这会有所帮助。我确实认为 CSS 是这些情况的最佳实践。
此致。