Using A Tracer Cookie To Watch For Browser Download-Prompts In Lucee CFML

Using A Tracer Cookie To Watch For Browser Download-Prompts In Lucee CFML

Ben Nadel explores the idea of using tracer cookies to monitor and respond to download-prompts using Lucee CFML In this demo, he shows an overlay while a report is being generated; and then, closes the overlay when the user is prompted to download the report.

Yesterday, I was working on some report-generation for InVision that used Content-Disposition: attachment in order to prompt the user to save the generated content. My current approach is just to initiate the download in a new tab, which the browser automatically closes once the report has been generated. This approach is fine; but, it got me wondering if I could hook into the life-cycle of the report-generation and download-prompt programmatically. To do this, I wanted to explore the use of cookies in Lucee CFML

First Attempt: Using an IFrame

My first attempt at hooking into the download-prompt was to try and route the report-generation through an iframe. The hope was that I could listen for the load event on the iframe itself, which would tell me when the user was prompted for the download.

Unfortunately, it doesn't appear that the browser emits a load event on iframe elements that don't render content.

Second Attempt: Nested IFrames

My second attempt was to nest one iframe element within another and then generate the report within the nested iframe. The hope here was that the outer iframe would have a load event since it generated content; but, that its load event would be tied to the loading of the inner iframe which was triggering the download.

This actually worked in modern browser (Chrome, Firefox, Safari). However, it did not work in IE11. And, since InVision still supports IE11, I had to find a solution that was more broadly supported.

My third attempt is based on an old jQuery plug-in by John Culviner. The idea behind this approach is that the report-generation code returns, as part of its HTTP Response, a Set-Cookie header that contains a unique tracer token. The client-side code can then start polling the document.cookie value for said unique token; and, when it shows up, we can be confident that the report-generation has been completed (and that the user has been prompted to download the binary).

coldfusion javascript / dhtml browser download

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Download files and zip them in your browsers using Javascript

Instead of generating zip file and transfer it from your server, why not download data and zip them in your browsers?Download files and zip them in your browsers using Javascript.

JavaScript Shopping Cart - Javascript Project for Beginners

JavaScript Shopping Cart - javascript shopping cart tutorial for beginnersBuy me a coffee 🍺 Code: https://bit....

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.