Solved

Progress Bar and iFrame issue on Safari

Posted on 2009-05-13
9
724 Views
Last Modified: 2013-12-07
I am developing a page that will load a pdf into a iFrame  and then print the pdf to a local printer connected to the users computer. I have the print routine working, but I want to add a progress bar to add a 2-3 second delay to give the pdf enough time to load on slow connections on large print jobs.

I added the progress bar from Brian Gosselin and the page works correctly in Firefox, but not in Safari. I have gotten down to the fact that the last line of the code "window.onload=progressBarInit;" is not calling the script to activate in Safari.

If I remove the iFrame, the script works in both browsers so the issue is tied to the iFrame. Could the issue be that the browser is leaving the iFrame as the current focus? if so how can I return it to the main page?
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
 
<head>
	<title>Time-based Progress Bar</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-language" content="en">
	<script type="text/javascript">
            function zPrint(oTgt)
            {
            	var TheFrame = document.getElementById('PDFFrame').contentWindow;
            	TheFrame.focus();
                TheFrame.print();
            }
      </script>
 
</head>
 
<body>
 
 
 
<iframe id="PDFFrame" style="width:100px; height:200px" src="demo.pdf" frameborder="1"></iframe>
<input type="button" value="Print PDF" onclick="zPrint();" />
 
<script language="javascript">
// Time-based progress bar- By Brian Gosselin at http://scriptasylum.com/bgaudiodr
 
var loadedcolor='blue' ;       // PROGRESS BAR COLOR
var unloadedcolor='lightgrey';     // COLOR OF UNLOADED AREA
var bordercolor='navy';            // COLOR OF THE BORDER
var barheight=15;                  // HEIGHT OF PROGRESS BAR IN PIXELS
var barwidth=400;                  // WIDTH OF THE BAR IN PIXELS
var waitTime=5;                   // NUMBER OF SECONDS FOR PROGRESSBAR
 
// THE FUNCTION BELOW CONTAINS THE ACTION(S) TAKEN ONCE BAR REACHES 100%.
// IF NO ACTION IS DESIRED, TAKE EVERYTHING OUT FROM BETWEEN THE CURLY BRACES ({})
// BUT LEAVE THE FUNCTION NAME AND CURLY BRACES IN PLACE.
// PRESENTLY, IT IS SET TO DO NOTHING, BUT CAN BE CHANGED EASILY.
// TO CAUSE A REDIRECT TO ANOTHER PAGE, INSERT THE FOLLOWING LINE:
// window.location="http://redirect_page.html";
// JUST CHANGE THE ACTUAL URL OF COURSE :)
 
var action=function()
{
alert("Thank you for visiting JavaScriptBank.com");
}
 
//*****************************************************//
//**********  DO NOT EDIT BEYOND THIS POINT  **********//
//*****************************************************//
 
var ns4=(document.layers)?true:false;
var ie4=(document.all)?true:false;
var blocksize=(barwidth-2)/waitTime/10;
var loaded=0;
var PBouter;
var PBdone;
var PBbckgnd;
var Pid=0;
var txt='';
if(ns4){
 
txt+='<table border=0 cellpadding=0 cellspacing=0><tr><td>';
txt+='<ilayer name="PBouter" visibility="hide" height="'+barheight+'" width="'+barwidth+'" onmouseup="hidebar()">';
txt+='<layer width="'+barwidth+'" height="'+barheight+'" bgcolor="'+bordercolor+'" top="0" left="0"></layer>';
txt+='<layer width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+unloadedcolor+'" top="1" left="1"></layer>';
txt+='<layer name="PBdone" width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+loadedcolor+'" top="1" left="1"></layer>';
txt+='</ilayer>';
txt+='</td></tr></table>';
}else{
 
txt+='<div id="PBouter" onmouseup="hidebar()" style="position:relative; visibility:hidden; background-color:'+bordercolor+'; width:'+barwidth+'px; height:'+barheight+'px;">';
txt+='<div style="position:absolute; top:1px; left:1px; width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px; background-color:'+unloadedcolor+'; font-size:1px;"></div>';
txt+='<div id="PBdone" style="position:absolute; top:1px; left:1px; width:0px; height:'+(barheight-2)+'px; background-color:'+loadedcolor+'; font-size:1px;"></div>';
txt+='</div>';
}
 
document.write(txt);
 
function incrCount(){
window.status="Loading...";
loaded++;
if(loaded<0)loaded=0;
if(loaded>=waitTime*10){
clearInterval(Pid);
loaded=waitTime*10;
setTimeout('hidebar()',100);
}
resizeEl(PBdone, 0, blocksize*loaded, barheight-2, 0);
}
 
function hidebar(){
clearInterval(Pid);
window.status='';
//if(ns4)PBouter.visibility="hide";
//else PBouter.style.visibility="hidden";
action();
}
 
//THIS FUNCTION BY MIKE HALL OF BRAINJAR.COM
function findlayer(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
layer=doc.layers[i];
if(layer.name==name)return layer;
if(layer.document.layers.length>0)
if((layer=findlayer(name,layer.document))!=null)
return layer;
}
return null;
}
 
function progressBarInit(){
PBouter=(ns4)?findlayer('PBouter',document):(ie4)?document.all['PBouter']:document.getElementById('PBouter');
PBdone=(ns4)?PBouter.document.layers['PBdone']:(ie4)?document.all['PBdone']:document.getElementById('PBdone');
resizeEl(PBdone,0,0,barheight-2,0);
if(ns4)PBouter.visibility="show";
else PBouter.style.visibility="visible";
Pid=setInterval('incrCount()',95);
}
 
function resizeEl(id,t,r,b,l){
if(ns4){
id.clip.left=l;
id.clip.top=t;
id.clip.right=r;
id.clip.bottom=b;
}else id.style.width=r+'px';
}
window.onload=progressBarInit;
</script>
 
</body>
</html>

Open in new window

0
Comment
Question by:aeg1s
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
9 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24375620
perhaps

window.onload=function() { progressBarInit(); }
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24375631
or perhaps


window.onload=function() { setTimeout('progressBarInit()',200) }
0
 

Author Comment

by:aeg1s
ID: 24375739
Nope, both those still work in Firefox, but not in Safari. I can even take this farther....

Even simplifying the code to just say "Hi" will not work in Safari, but works great in firefox.


<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Time-based Progress Bar</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-language" content="en">
	</head>
<body>
<iframe id="PDFFrame" style="width:100px; height:200px" src="demo.pdf" frameborder="1"></iframe>
 
<script language="javascript">
	window.onload=function() { alert("HI")};
</script>
 
</body>
</html>

Open in new window

0
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 

Author Comment

by:aeg1s
ID: 24376525
Here are some more details.....

If you change the iFrame to hold a gif or any other html page it works correctly.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24376953
Ok, then the iframe does not trigger the onload because the pdf is not shown in the iframe as in windows.
0
 

Author Comment

by:aeg1s
ID: 24376986
Correct, the iFrame will not call the onload, but it prevents the main page from calling onload....
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 24382101
Have a look here
http://novemberborn.net/javascript/domcontentloaded-style-information

If too much, try this

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <title>Time-based Progress Bar</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="content-language" content="en">
        </head>
<body>
<iframe id="PDFFrame" style="width:100px; height:200px" src="demo.pdf" frameborder="1"></iframe>
.
.
. 
<script language="javascript">
alert("HI")
</script>
</body>
</html>

Open in new window

0
 
LVL 16

Expert Comment

by:CWS (haripriya)
ID: 37194223
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question