Javascript Voodoo: Tracking Downloads, Part 3

Pando Logo

This is the last of a three part series: [ Part 1 | Part 2 ]

So I left off in part 2 with two problems: image load/download delay times and recent Internet Explorer security.

The first problem turns out to be easy to solve. If you want to wait to trigger a javascript event until after the entire page (including images) has loaded, javascript provides the handy “onLoad” function. So rather than using a delay counter to guess at when the images would finish loading, I instead move the automatic form submit into a function and used “onload” to call that function after the entire page had loaded. I placed something like this at the top of the document:

function startdl() {
  document.dlform.submit();
}
window.onload = startdl;

And removed the “setTimeout” code from the javascript code in the body:

  window.setTimeout(’document.dlform.submit()’, 5000);

Now, the download kicks off as soon as the entire page (including images) loads. Much smoother.

The harder problem was figuring out what to do about Internet Explorer. I spent some time searching for a download site that got around this problem and eventually ended up on the WinZip site. After examining their code, I noticed they were handling differently browsers with a user agent string containing “SV1.” Google landed me on this blog post on the IEBlog explaining that SV1 was added to the user agent string of IE6 with XP Service Pack 2. It stands for “Security Version 1.” I assumed this was the version that began blocking file downloads via javascripted form submits.

Further examination of the WinZip code showed that, when a user clicked the download link from an “SV1″ browser, the page used a window.open function call to open an essentially invisible window with the path to the file URL. On Firefox this causes a small, blank, empty window to appear on the screen. IE, however, begins the file download dialog and the window artifact does not remain on the screen. I created a function to do this:

function dl() {
  if (window.navigator.userAgent.indexOf("SV1") != -1) {
    var dlfile = 'http://example.com/file.exe';
    window.open(dlfile,'securewin','toolbar=0,location=no,directories=0,status=0,scrollbars=no,resizable=0,width=1,height=1,top=0,left=0');
    window.focus();
  }
}

This code basically says “if the user agent string contains SV1, open a 1 x 1 pixel window with the contents of http://example.com/file.exe and then focus back to this window.”
I then added an onClick handler to the download link like so:

<a href="http://example.com/start-download/" onClick=”dl();”>download the file</a>

This worked great, except it still popped up the yellow warning box on the landing page. WinZip’s downloader did this, too, but it is pretty simple to work around the problem. I also discovered that some versions of IE7 don’t contain “SV1″ in the user agent string (wikipedia), but still blocked downloads.

To get around the IE7 problem, I added a check for “MS IE7.0″ in the user agent string in dl():

function dl() {
  if (window.navigator.userAgent.indexOf("SV1") != -1 || window.navigator.userAgent.indexOf(”MSIE 7.0″) != -1) {
    var dlfile = ‘http://example.com/file.exe’;     window.open(dlfile,’securewin’,'toolbar=0,location=no,directories=0,status=0,scrollbars=no,resizable=0,width=1,height=1,top=0,left=0′);
    window.focus();
  }
}

To get around the “yellow bar” problem, I modified the “startdl()” function to not kick off the download for IE6 or 7 browsers, since the download had already been requested by window.open:

function startdl() {
  if (window.navigator.userAgent.indexOf("SV1") != -1 ||     window.navigator.userAgent.indexOf("MSIE 7.0") != -1) {
    return;
  } else {
    document.dlform.submit();
  }
}

Now, altogether, when a user clicks “download,” the download dialog begins and a page is loaded. The page both presents novice users with helpful installation instruction and records the download click with our partner company’s software. Phew. Anybody got a better way?

3 Responses to “Javascript Voodoo: Tracking Downloads, Part 3”

  1. WebGyver Says:

    Nicely done and well written!

    Phew, I appreciate your well-documented research and examples. Your articles on this topic have just saved me a couple of hours of research. I was dabbling with hidden iFrames and meta tags (meta http-equiv=”refresh”/see snapfiles.com), but I prefer something along the lines of your cross-browser cognizant Javascript.

    Thank you very much!

  2. Viji Says:

    I want to open a new invisible window using java script function. That new window is not visible to the users. please advise me. any possiblities to create a new invisible window using java script.

  3. madhu Says:

    you can try a invisible window of size 1×1 pixels .
    anyhow the user is not going to view the content.
    that should work fine.

Leave a Reply