Free - Opening PDFs in a new window with JavaScript

Opening documents such as PDFs in a newwindow should be automated using JavaScript for the following reasons:

• Users will often close the web browser when a PDF is opened, mistakenly believing the document has been opened in Adobe Reader
• The attribute historically used to open a new window, target, has been removed from the HTML 4.01 Strict specification (it's now deprecated)
• Opening a new window is a behaviour and should be moved to the behavioural layer.
  
  

Using JavaScript can also be particularly useful when a website is content managed. Rather than having to rely on site editors to remember to open a link to a PDF in a new window the process is handled by a simple JavaScript function.

Check out this fully functioning example to see what we'll create. Check out Advanced Layer Popup if you want to open your PDF in a layer that pops up or Advanced Open Window if you want to create a new window with the press of a button.

Looping through the links

First we create the loop that goes through all the links in the page, as follows:

function fNewPDFWindows ()
{
if (!document.getElementsByTagName) return false;
var links = document.getElementsByTagName("a");
for (var eleLink=0; eleLink < links.length; eleLink ++) {
}
}

The indexOf method

Next we need to determine as we loop through the links whether the link is to a PDF document or not. The indexOf method is ideal for this by returning the index of the search value (the position of the search value in the string). The indexOf method requires a search value but you can also specify where to start the search from within the string (in this example we don't need to pass the method this parameter):

So pass the indexOf method the string ".pdf" to find out if the file being linked to is a PDF document. The indexOf method returns either -1 if the string isn't found or the index of the matching text.

function fNewPDFWindows ()
{
if (!document.getElementsByTagName) return false;
var links = document.getElementsByTagName("a");
for (var eleLink=0; eleLink < links.length; eleLink ++) {
if (links[eleLink].href.indexOf('.pdf') !== -1) {
}
}
}

onclick function

Next we need to apply an onclick event to each of the links to PDF documents, so when they're clicked the new window is opened:

links[eleLink].onclick =
function() {
}

First, let's open the new window, and give the window some parameters. The parameters we're going to pass are as follows.

• URL - the document we want to display in the new window
• Specs - a comma separated list of window properties such as scrollbars etc

For a comprehensive list of windows properties take a look W3C schools DOM open method page.

The completed function in this example is as follows. This opens the link address in a new, re sizable window with scrollbars:

links[eleLink].onclick =
function() {
window.open(this.href,'resizable,scrollbars');
return false;
}

We insert the onclick event within the if statement that detects whether a PDF document has been found:

function fNewPDFWindows ()
{
if (!document.getElementsByTagName) return false;
var links = document.getElementsByTagName("a");
for (var eleLink=0; eleLink < links.length; eleLink ++) {
if (links[eleLink].href.indexOf('.pdf') !== -1) {
links[eleLink].onclick =
function() {
window.open(this.href,'resizable,scrollbars');
return false;
}
}
}
}