J
joshb
Hi guys,
What I'm trying to do here, is preload (this might not be the correct
term) a PDF in either a hidden iFrame, or a DIV or something. I have a
menu with links to a bunch of resourceful PDF's, and when a user clicks
on a link, I want the screen to display a "Loading..." message until
the PDF is fully loaded and then the Loading message will disappear and
the PDF will appear.
My current code checks for the readyState of the iFrame called "PDF",
but the problem with this is that the iFrame loads immediately, and
then the PDF takes X amount of time to load, therefore I can't check
the readyState to see when the PDF is done loading.
Here is my current code, any and all help is greatly appreciated.
PS: I'm using ColdFusion, incase you're wondering about the <!---
comments or anything else.
Thanks,
Josh.
<HTML>
<HEAD>
<TITLE>Resource PDF's</TITLE>
<STYLE>
#loading {
visibility: hidden;
font: bold 12px Verdana;
color: red;
}
</STYLE>
<!--- JavaScript Calls Starts here --->
<SCRIPT LANGUAGE="JavaScript">
function openIFrame(iFrameId,WinURL) {
closeAllMenus();
document.getElementById("loading").style.visibility="visible";
var doc = new Image();
doc.onerror = function() {
updateContents(iFrameId, WinURL);
}
doc.src = WinURL;
}
function hideDiv() {
document.getElementById("loading").style.visibility="hidden";
}
function updateContents(iFrameId, WinURL) {
window.open(WinURL, iFrameId);
setTimeout("pollIFrame('"+iFrameId+"')",200);
}
function pollIFrame(iFrameId) {
var destFrame = document.all("PDF");
alert(destFrame.document.readyState);
if(destFrame.document.readyState=='complete') {
hideDiv();
} else {
setTimeout("pollIFrame('"+iFrameId+"')",200);
}
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE WIDTH="100%" BORDER="0" CELLPADDING="3" CELLSPACING="0">
<TR>
<TD>
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="145" VALIGN="top" HEIGHT="100%">
</TD>
<TD WIDTH="5"></TD>
<TD ALIGN="center" VALIGN="top">
<!--- Content Starts Here --->
</TR>
<TR HEIGHT="50">
<TD>
</TD>
</TR>
<TR>
<TD ALIGN="center">
<DIV id="loading">Loading...</DIV>
<IFRAME NAME="PDF" ID="PDF" SRC="/rootFolder/Agenda.pdf"
HEIGHT="400" WIDTH="100%" FRAMEBORDER="NO" BORDER="0" FRAMESPACING="0"
SCROLLING="NO">
</IFRAME>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
What I'm trying to do here, is preload (this might not be the correct
term) a PDF in either a hidden iFrame, or a DIV or something. I have a
menu with links to a bunch of resourceful PDF's, and when a user clicks
on a link, I want the screen to display a "Loading..." message until
the PDF is fully loaded and then the Loading message will disappear and
the PDF will appear.
My current code checks for the readyState of the iFrame called "PDF",
but the problem with this is that the iFrame loads immediately, and
then the PDF takes X amount of time to load, therefore I can't check
the readyState to see when the PDF is done loading.
Here is my current code, any and all help is greatly appreciated.
PS: I'm using ColdFusion, incase you're wondering about the <!---
comments or anything else.
Thanks,
Josh.
<HTML>
<HEAD>
<TITLE>Resource PDF's</TITLE>
<STYLE>
#loading {
visibility: hidden;
font: bold 12px Verdana;
color: red;
}
</STYLE>
<!--- JavaScript Calls Starts here --->
<SCRIPT LANGUAGE="JavaScript">
function openIFrame(iFrameId,WinURL) {
closeAllMenus();
document.getElementById("loading").style.visibility="visible";
var doc = new Image();
doc.onerror = function() {
updateContents(iFrameId, WinURL);
}
doc.src = WinURL;
}
function hideDiv() {
document.getElementById("loading").style.visibility="hidden";
}
function updateContents(iFrameId, WinURL) {
window.open(WinURL, iFrameId);
setTimeout("pollIFrame('"+iFrameId+"')",200);
}
function pollIFrame(iFrameId) {
var destFrame = document.all("PDF");
alert(destFrame.document.readyState);
if(destFrame.document.readyState=='complete') {
hideDiv();
} else {
setTimeout("pollIFrame('"+iFrameId+"')",200);
}
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE WIDTH="100%" BORDER="0" CELLPADDING="3" CELLSPACING="0">
<TR>
<TD>
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="145" VALIGN="top" HEIGHT="100%">
</TD>
<TD WIDTH="5"></TD>
<TD ALIGN="center" VALIGN="top">
<!--- Content Starts Here --->
</TR>
<TR HEIGHT="50">
<TD>
</TD>
</TR>
<TR>
<TD ALIGN="center">
<DIV id="loading">Loading...</DIV>
<IFRAME NAME="PDF" ID="PDF" SRC="/rootFolder/Agenda.pdf"
HEIGHT="400" WIDTH="100%" FRAMEBORDER="NO" BORDER="0" FRAMESPACING="0"
SCROLLING="NO">
</IFRAME>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>