PDA

View Full Version : Popup DocViewer

glenngv
02-24-2003, 03:39 AM
In IE, when you open documents such as Word, Excel, Powerpoint, Acrobat and Shockwave Flash files,
the document will be opened inside the browser if the user has the appropriate software installed in his machine.
Oftentimes, you want it to be opened in a new browser window and set focus on that window
(and when the link is clicked again while that document is still open, it will just focus to that window).
But since it is not an HTML document, its window handle cannot used the methods and properties of window object.
The script below employs a nice trick :D. It also displays a smart "Loading..." status message.



/*************************************************
Popup DocViewer
- Opens MS Office documents, Adobe Acrobat and Shockwave Flash files
in a popup window with a smart "Loading..." status message
(c) 2003 Glenn G. Vergara
http://www21.brinkster.com/gver/
*************************************************/

function openDoc(filename,target){

//if not IE, open link normally
if (!document.all){
location.href = filename;
return;
}

var strWinHandle = target + "_WinOpenDoc"; //to ensure no global variable conflict with other script

//just focus to the corresponding window if it is already open
if (window[strWinHandle] && !window[strWinHandle].closed){
window[strWinHandle].focus();
return;
}

//open blank page
window[strWinHandle] = window.open('',target,'menubar=1,location=0,toolbar=0,resizable=1,status=0'); //add other window features here

//create frameset with only one frame
var strHTML = '<html>\n<head>\n<title>Loading...Please wait.</title>\n</head>\n';
strHTML += '<frameset onload="window.focus()">\n<frame name="docFrame" src="about:blank">\n</frameset>\n';
strHTML += '</html>';
window[strWinHandle].document.write(strHTML);
window[strWinHandle].document.close();

//Flash the 'Loading...' message
strHTML = '<html><body>';
strHTML += '<table width="100%" height="100%">';
strHTML += '<tr><td align="center" valign="middle">';
strHTML += '<font face="Arial" color="red">Loading...Please wait.</font><br><br>';
//provide link to close window (for browsers with no appropriate plugin for the needed software)
strHTML += '<font face="Arial" size="1" color="gray">If you do not have the needed software to launch the document, please <a href="javascript:top.close()">close</a> this window.</font>';
strHTML += '</td></tr></table>';
strHTML += '</body></html>';
var winDocFrame = window[strWinHandle].top.frames['docFrame'];
winDocFrame.document.write(strHTML);
winDocFrame.document.close();

//preload the document
var doc = new Image();
doc.onerror = function(){
//check window if still open, the user might have closed it
if (window[strWinHandle] && !window[strWinHandle].closed){
window[strWinHandle].document.title = filename.substring(filename.lastIndexOf("/")+1); //extract just the filename
winDocFrame.location.replace(filename); //finally, set frame's location to the document filename
}
}
doc.src = filename; //onerror handler fires since image src is not actually an image
}

//call it like these:
//<a href="javascript:openDoc('/doc/test.doc','_doc')">DOC</a>
//<a href="javascript:openDoc('/doc/test.xls','_xls')">XLS</a>
//<a href="javascript:openDoc('/doc/test.pdf','_pdf')">PDF</a>



Pls ignore the whitespace put by this forum on the line where it says "window.open"
glenngv
03-19-2003, 06:41 AM
I've modified this script. I found out that NS4 and NS6 also open PDF files inside the browser and also SWF files in NS6.
I also found a quirk by NS6. After dynamically creating a frameset page using document.write,
accessing the window.document object of the frame inside returns null (don't know why?? :confused: ).
If you put an alert, it would run ok so I fixed it by putting a delay (setTimeout).
Any solution without setTimeout is welcome. :)
See the modified code below:



<script language="javascript">

/**************************************************
PopUp DocViewer
- opens document inside a popup browser window
(granted appropriate software/plugin is installed)

(c) 2003 Glenn G. Vergara
http://www21.brinkster.com/gver/

MS Office documents open inside IE (.doc, .xls, .ppt)
Acrobat documents open inside IE, Netscape4 and Netscape6 (.pdf)
Shockwave files open inside IE and Netscape6 (.swf)
*************************************************/

function openDoc(filename,target){

//to ensure no global variable conflict with other script
var strWinHandle = target + "objDocWin";

//just focus to the corresponding window if it is already open
if (window[strWinHandle] && !window[strWinHandle].closed){
window[strWinHandle].focus();
return false;
}

//open blank page
window[strWinHandle] = window.open('',target,'menubar=1,location=0,toolbar=0,resizable=1,status=0');

//change window name (target); later, target will be used as frame name
window[strWinHandle].name = strWinHandle;

//create frameset with only 1 frame
var strHTML = '<html>\r\n<head>\r\n';
strHTML += '<title>'+filename.substring(filename.lastIndexOf("/")+1)+'</title>\r\n';
strHTML += '</head>\r\n';
strHTML += '<frameset onload="window.focus()" rows="100%,*" border="0" frameborder="0" framespacing="0">\r\n';
strHTML += '<frame name="'+target+'" src="about:blank">\r\n'; //set target as frame name
strHTML += '</frameset>\r\n';
strHTML += '</html>';
window[strWinHandle].document.write(strHTML);
window[strWinHandle].document.close();

//put a little delay; Netscape6 causes a null document object when called directly
setTimeout('loadDoc("'+strWinHandle+'","'+target+'","'+filename+'")',0);

return false; //this cancels href of the calling link
}

function loadDoc(strWinHandle,target,filename){
//Flash the 'Loading...' message
var strHTML = '<html><body>';
strHTML += '<table width="100%" height="100%">';
strHTML += '<tr><td align="center" valign="middle">';
strHTML += '<font face="Arial" color="red">Loading...Please wait.</font><br><br>';
//provide link to close window (for browsers with no appropriate plugin for the needed software)
strHTML += '<font face="Arial" size="1" color="gray">If you do not have the needed software/plugin to launch the document inside the browser, please <a href="javascript:window.close()">close</a> this window.</font>';
strHTML += '</td></tr></table>';
strHTML += '</body></html>';
var winDocFrame = window[strWinHandle].frames[target];
winDocFrame.document.write(strHTML); //winDocFrame.document is null in Netscape6 if called directly
winDocFrame.document.close();

//preload the document
var doc = new Image();
doc.onerror = function(){
//check window if still open, the user might have closed it
if (window[strWinHandle] && !window[strWinHandle].closed){
winDocFrame.location.replace(filename); //finally, set frameset's location to the document filename
}
}
doc.src = filename; //onerror handler fires since image src is not actually an image
}

/***********
Sample call:
(backward compatible since if javascript is disabled, the document will still be opened in a new window)
(each link must have different target, target must not have spaces and other special characters except underscore)

for anchor links:
<a href="docs/file.pdf" target="_pdf" onlick="return openDoc(this.href,this.target)">doc 1</a>
<a href="docs/file2.pdf" target="_pdf2" onlick="return openDoc(this.href,this.target)">doc 2</a>

for buttons:
<input type="button" value="Open doc 1" onclick="openDoc('docs/file.pdf','_pdf')">
<input type="button" value="Open doc2" onclick="openDoc('docs/file2.pdf','_pdf2')">

***********/

</script>
glenngv
07-17-2003, 10:44 AM
Modified code to allow specifying document title. Defaults to filename if not specified. Sample calls are inside the code in comment tags.


<script language="javascript">

/ **************************************************

PopUp DocViewer
- opens document inside a popup browser window
(granted appropriate software/plugin is installed)

(c) 2003 Glenn G. Vergara
http://www21.brinkster.com/gver/

MS Office documents open inside IE (.doc, .xls, .ppt)
Acrobat documents open inside IE, Netscape4 and Netscape6 (.pdf)
Shockwave files open inside IE and Netscape6 (.swf)
*************************************************/

function openDoc(filename,target,windowTitle){

//to ensure no global variable conflict with other script
var strWinHandle = target + "objDocWin";

//just focus to the corresponding window if it is already open
if (window[strWinHandle] && !window[strWinHandle].closed){
window[strWinHandle].focus();
return false;
}

//open blank page
window[strWinHandle] = window.open('',target,'menubar=1,location=0,toolbar=0,resizable=1,status=0');

//change window name (target); later, target will be used as frame name
window[strWinHandle].name = strWinHandle;

//create frameset with only 1 frame
var strHTML = '<html>\r\n<head>\r\n';
//window title defaults to filename if not specified
var winTitle = (windowTitle) ? windowTitle:filename.substring(filename.lastIndexOf("/")+1);
strHTML += '<title>'+winTitle+'</title>\r\n';
strHTML += '</head>\r\n';
strHTML += '<frameset onload="window.focus()" rows="100%,*" border="0" frameborder="0" framespacing="0">\r\n';
strHTML += '<frame name="'+target+'" src="about :blank">\r\n'; //set target as frame name
strHTML += '</frameset>\r\n';
strHTML += '</html>';
window[strWinHandle].document.write(strHTML);
window[strWinHandle].document.close();

//put a little delay; Netscape6 causes a null document object when called directly
setTimeout('loadDoc("'+strWinHandle+'","'+target+'","'+filename+'")',0);

return false; //this cancels href of the calling link
}

function loadDoc(strWinHandle,target,filename){
//Flash the 'Loading...' message
var strHTML = '<html><body>';
strHTML += '<table width="100%" height="100%">';
strHTML += '<tr><td align="center" valign="middle">';
strHTML += '<font face="Arial" color="red">Loading...Please wait.</font><br><br>';
//provide link to close window (for browsers with no appropriate plugin for the needed software)
strHTML += '<font face="Arial" size="1" color="gray">If you do not have the needed software/plugin to launch the document inside the browser, please <a href="java script:window.close()">close</a> this window.</font>';
strHTML += '</td></tr></table>';
strHTML += '</body></html>';
var winDocFrame = window[strWinHandle].frames[target];
winDocFrame.document.write(strHTML); //winDocFrame.document is null in Netscape6 if called directly
winDocFrame.document.close();

//preload the document
var doc = new Image();
doc.onerror = function(){
//check window if still open, the user might have closed it
if (window[strWinHandle] && !window[strWinHandle].closed){
winDocFrame.location.replace(filename); //finally, set frameset's location to the document filename
}
}
doc.src = filename; //onerror handler fires since image src is not actually an image
}

/***********
Sample calls:
(backward compatible since if javascript is disabled, the document will still be opened in a new window)
(each link must have different target, target must not have spaces and other special characters except underscore)

for anchor links:
<a href="docs/file.pdf" target="_pdf" onlick="return openDoc(this.href,this.target,this.alt)" alt="This is document 1">doc 1</a>
<a href="docs/file2.pdf" target="_pdf2" onlick="return openDoc(this.href,this.target,this.alt)" alt="This is document 2">doc 2</a>

for buttons:
<input type="button" value="Open doc 1" onclick="openDoc('docs/file.pdf','_pdf','Acrobat File 1')">
<input type="button" value="Open doc2" onclick="openDoc('docs/file2.pdf','_pdf2','Acrobat File 2')">

for onload popups:

<body onload="openDoc('docs/file.swf','_swf','My ShockWave File')">

***********/

</script>
ublend
03-14-2005, 06:05 PM
I tried your code, but it just launches the application when the enduser clicks the link... What I need is to see the document (.doc, .ppt, .xls, or .pdf) open in the desired frame without launching the application so that the enduser cannot do a 'save' or 'save as' - to prevent erroneous copies of files on the network. Is this possible with your script? Any help you can give me is INCREDIBLY APPRECIATED.

thanks
Ublend
glenngv
03-15-2005, 02:46 AM
Can you describe your frame layout, links setup, and browser used and anything that will help me quickly solve your problem?
ublend
03-15-2005, 02:34 PM
I have a frameset consisting of three frames :
Left Frame (Navigation frame)
Top Frame (site header)
Right Frame (Content frame)
We are running Internet Exporer 5.5
I need endusers to click the link to a chosen document and have it open in the Right Frame or in a popup window without invoking Adobe Acrobat, (Embedded in the page is ideal, as I need to control whether they can save a copy of the document).

thanks for your help.
It is most appreciated!
Ublend
glenngv
03-16-2005, 01:42 AM
Have you tried simply using this?

<a href="file1.doc" target="nameOfRightFrame">word document</a>
<a href="file2.pdf" target="nameOfRightFrame">pdf document</a>

For some documents, the File/Save dialog is always invoked if the "Always ask before opening this type of file" check box is checked. If your ultimate reason of framing the document is to prevent saving it, no amount of scripting can do that as users have complete control of the document once it has been loaded to the window or frame. In acrobat, there is 'Save a copy' (diskette) icon available in the page. In case of Office documents and File/Save dialog is not invoked, the user can just 'right-click and Open in New Window' the link then do 'File-Save as...'. There's also the cache. There are many ways to have the copy of the document or any Web resource for that matter.
glenngv
05-18-2005, 06:18 AM
Latest code:
<html>
<head>
<title>Popup DocViewer</title>
<script type="text/javascript">
/**************************************************

PopUp DocViewer
- opens document inside a popup browser window
(granted appropriate software/plugin is installed)

(c) 2003 Glenn G. Vergara
http://www21.brinkster.com/gver/
glenngv[at]yahoo[dot]com

MS Office documents open inside IE (.doc, .xls, .ppt)
Acrobat documents open inside IE, Netscape4 and Netscape6 (.pdf)
Shockwave files open inside IE and Netscape6 (.swf)
*************************************************/

function openDoc(filename,target,windowTitle){

//to ensure no global variable conflict with other script
var strWinHandle = target + "objDocWin";

//just focus to the corresponding window if it is already open
if (window[strWinHandle] && !window[strWinHandle].closed){
window[strWinHandle].focus();
return false;
}

//open blank page
window[strWinHandle] = window.open('',target,'menubar=1,location=0,toolbar=0,resizable=1,status=0');

//change window name (target); later, target will be used as frame name
window[strWinHandle].name = strWinHandle;

//create frameset with only 1 frame
var strHTML = '<html>\r\n<head>\r\n';
//window title defaults to filename if not specified
var winTitle = (windowTitle) ? windowTitle:filename.substring(filename.lastIndexOf("/")+1);
strHTML += '<title>'+winTitle+'</title>\r\n';
strHTML += '</head>\r\n';
strHTML += '<frameset onload="window.focus()" rows="100%,*" border="0" frameborder="0" framespacing="0">\r\n';
strHTML += '<frame name="'+target+'" src="about:blank">\r\n'; //set target as frame name
strHTML += '</frameset>\r\n';
strHTML += '</html>';
window[strWinHandle].document.write(strHTML);
window[strWinHandle].document.close();

//put a little delay; Netscape6 causes a null document object when called directly
setTimeout('loadDoc("'+strWinHandle+'","'+target+'","'+filename+'")',0);

return false; //this cancels href of the calling link
}

function loadDoc(strWinHandle,target,filename){
//Flash the 'Loading...' message
var strHTML = '<html>\n<head>\n<title></title>\n';
strHTML += '<style type="text/css">\nbody{margin:20px 0px 0px 0px;}\n#container{width:100%;text-align:center;font-family:Arial,Tahoma,Verdana}\n#status{font-weight:bold;font-size:14px;color:red;width:100%;}\n#alternative{font-size:11px;color:gray;width:100%;}\n</style>';
strHTML += '</head>\n<body>';
strHTML += '<div id="container">\n<div id="status">Loading...Please wait.</div>\n';
//provide link to close window (for browsers with no appropriate plugin for the needed software)
strHTML += '<div id="alternative">If you do not have the needed software/plugin to launch the document inside the browser, please <a href="#" onclick="top.close();return false;">close</a> this window.</div>\n</div>';
strHTML += '</body>\n</html>';
var winDocFrame = window[strWinHandle].frames[target];
winDocFrame.document.write(strHTML); //winDocFrame.document is null in Netscape6 if called directly
winDocFrame.document.close();

//preload the document
var doc = new Image();
doc.onerror = function(){
//check window if still open, the user might have closed it
if (window[strWinHandle] && !window[strWinHandle].closed){
winDocFrame.location.replace(this.src); //finally, set frameset's location to the document filename
}
}
doc.src = filename; //onerror handler fires since image src is not actually an image
}

/***********
Sample calls:

for anchor links:
(backward compatible since if javascript is disabled, the document will still be opened in a new window)
(each link must have different target, target must not have spaces and other special characters except underscore)

<a href="docs/file.pdf" target="_pdf" onlick="return openDoc(this.href,this.target,this.title)" title="This is document 1">doc 1</a>
<a href="docs/file2.pdf" target="_pdf2" onlick="return openDoc(this.href,this.target,this.title)" title="This is document 2">doc 2</a>

for buttons:
<input type="button" value="Open doc 1" onclick="openDoc('docs/file.pdf','_pdf','Acrobat File 1')">
<input type="button" value="Open doc2" onclick="openDoc('docs/file2.pdf','_pdf2','Acrobat File 2')">

for onload popups:

<body onload="openDoc('docs/file.swf','_swf','My ShockWave File')">

***********/

</script>
</head>
<body>
<a href="test.pdf" target="_pdf" onclick="return openDoc(this.href,this.target,this.title)" title="This is document 1">doc 1</a>
<a href="test2.pdf" target="_pdf2" onclick="return openDoc(this.href,this.target,this.title)" title="This is document 2">doc 2</a>
</body>
</html>
bill beran
06-16-2006, 08:05 PM
Glenn,

I expected document 2 to open in the same window as document 1. Is that the expected behavior? If not, have you considered modifying this script so that instead of opening a new browser window, document 2 can optionally display in the same browser window. I have many pages of PDF report listings generated from an Oracle db that I want users to be able to open. Unless I close the pervious report window each time they click on a new link, their screen is littered with open report windows. I'd like to display the new report in the first window opened, without having to close the first window (my current solution).

Regards.

- b
Blazer2000x
06-16-2006, 10:10 PM
The script focuses to the window if it sees that the window is already open. But then it goes ahead and opens a new window regardless. I don't know much about scripting unfortunately, but you could try something like:


(c) 2003 Glenn G. Vergara
http://www21.brinkster.com/gver/
glenngv[at]yahoo[dot]com

MS Office documents open inside IE (.doc, .xls, .ppt)
Acrobat documents open inside IE, Netscape4 and Netscape6 (.pdf)
Shockwave files open inside IE and Netscape6 (.swf)
*************************************************/

function openDoc(filename,target,windowTitle){

//to ensure no global variable conflict with other script
var strWinHandle = target + "objDocWin";

//just focus to the corresponding window if it is already open
if (window[strWinHandle] && !window[strWinHandle].closed){
window[strWinHandle].focus();
return false;
}

//open blank page
if (!window[strWinHandle] || window[strWinHandle].closed) {
window[strWinHandle] = window.open('',target,'menubar=1,location=0,toolbar=0,resizable=1,status=0');
}

//change window name (target); later, target will be used as frame name
window[strWinHandle].name = strWinHandle;

//create frameset with only 1 frame
var strHTML = '<html>\r\n<head>\r\n';
//window title defaults to filename if not specified
var winTitle = (windowTitle) ? windowTitle:filename.substring(filename.lastIndexOf("/")+1);
strHTML += '<title>'+winTitle+'</title>\r\n';
strHTML += '</head>\r\n';
strHTML += '<frameset onload="window.focus()" rows="100%,*" border="0" frameborder="0" framespacing="0">\r\n';
strHTML += '<frame name="'+target+'" src="about:blank">\r\n'; //set target as frame name
strHTML += '</frameset>\r\n';
strHTML += '</html>';
window[strWinHandle].document.write(strHTML);
window[strWinHandle].document.close();

//put a little delay; Netscape6 causes a null document object when called directly
setTimeout('loadDoc("'+strWinHandle+'","'+target+'","'+filename+'")',0);

return false; //this cancels href of the calling link
}

function loadDoc(strWinHandle,target,filename){
//Flash the 'Loading...' message
var strHTML = '<html>\n<head>\n<title></title>\n';
strHTML += '<style type="text/css">\nbody{margin:20px 0px 0px 0px;}\n#container{width:100%;text-align:center;font-family:Arial,Tahoma,Verdana}\n#status{font-weight:bold;font-size:14px;color:red;width:100%;}\n#alternative{font-size:11px;color:gray;width:100%;}\n</style>';
strHTML += '</head>\n<body>';
strHTML += '<div id="container">\n<div id="status">Loading...Please wait.</div>\n';
//provide link to close window (for browsers with no appropriate plugin for the needed software)
strHTML += '<div id="alternative">If you do not have the needed software/plugin to launch the document inside the browser, please <a href="#" onclick="top.close();return false;">close</a> this window.</div>\n</div>';
strHTML += '</body>\n</html>';
var winDocFrame = window[strWinHandle].frames[target];
winDocFrame.document.write(strHTML); //winDocFrame.document is null in Netscape6 if called directly
winDocFrame.document.close();

//preload the document
var doc = new Image();
doc.onerror = function(){
//check window if still open, the user might have closed it
if (window[strWinHandle] && !window[strWinHandle].closed){
winDocFrame.location.replace(this.src); //finally, set frameset's location to the document filename
}
}
doc.src = filename; //onerror handler fires since image src is not actually an image
}

/***********
Sample calls:

for anchor links:
(backward compatible since if javascript is disabled, the document will still be opened in a new window)
(each link must have different target, target must not have spaces and other special characters except underscore)

<a href="docs/file.pdf" target="_pdf" onlick="return openDoc(this.href,this.target,this.title)" title="This is document 1">doc 1</a>
<a href="docs/file2.pdf" target="_pdf2" onlick="return openDoc(this.href,this.target,this.title)" title="This is document 2">doc 2</a>

for buttons:
<input type="button" value="Open doc 1" onclick="openDoc('docs/file.pdf','_pdf','Acrobat File 1')">
<input type="button" value="Open doc2" onclick="openDoc('docs/file2.pdf','_pdf2','Acrobat File 2')">

for onload popups:

<body onload="openDoc('docs/file.swf','_swf','My ShockWave File')">

***********/

</script>
</head>
<body>
<a href="test.pdf" target="_pdf" onclick="return openDoc(this.href,this.target,this.title)" title="This is document 1">doc 1</a>
<a href="test2.pdf" target="_pdf2" onclick="return openDoc(this.href,this.target,this.title)" title="This is document 2">doc 2</a>
</body>
</html>
bill beran
06-19-2006, 10:10 PM
If you don't know what you're doing then don't play around with someone else's copyrighted scripts.
glenngv
06-20-2006, 10:35 PM
Just specify the same target names for all links so that they will all be opened in the same popup window.
<a href="report1.pdf" target="pdfReport" onlick="return openDoc(this.href,this.target,this.title)" title="This is report 1">Report 1</a>

<a href="report2.pdf" target="pdfReport" onlick="return openDoc(this.href,this.target,this.title)" title="This is report 2">Report 2</a>

...
No need to modify the code.
bill beran
07-11-2006, 05:08 PM
Glenn,

This scipt still suffers from the IE 6.0 SP2 problem with not being able to set the focus on an open window after one PDF document has been displayed in the window. It does display the second PDF document in the existing window, but the existing window does not get the focus. Well, at least you don't get a JavaScript error...not sure whether that's good or bad...
glenngv
07-14-2006, 04:25 PM
Can I see your code for the links?
deepimania
09-17-2007, 06:59 AM
helllo everyone...i'm new to javascript...
can u pls tel me whr all those files shud be??
ini function openDoc we are trying to open test.xls,whr shud that file be in the system???
reply asap
venrams
09-26-2007, 10:32 PM
Hi Glenn,

Your code on 05-18-2005 - Latest Code, 06:18 AM works like charm.

Thanks,

Ramesh