New from Firefox 89: The afterprint event!

Having an issue with this fragment of code:

const afterPrint = () => {
    this.location.back();
    window.removeEventListener('afterprint', afterPrint);
};

window.addEventListener('afterprint', afterPrint);
window.print();

I'm trying to redirect the user back in history after they close the print dialog (either by printing or canceling).

In Chrome, everything works fine as expected. However, in Firefox 89, the afterprint event gets fired when the page is sent to the printer, even if the print dialog is still open.

https://i.stack.imgur.com/INYYt.png

Since the print dialog is still open, the this.location.back() function is blocked and doesn't work.

I tried it with Firefox 83 before and it worked correctly. But after updating to version 89, I noticed that it no longer functions as intended.

Are there any workarounds for this issue?

javascriptangular

Answer №1

If you're curious, I've discovered a solution to the problem at hand

To address the issue, I implemented this.location.back(); within window.setTimeout, ensuring it is prevented from running while the print dialog is active.
Upon closing the print dialog, I successfully navigate back to the previous page.

Here's the code snippet:

const afterPrint = () => {
    window.setTimeout(() => {
        this.location.back();
        window.removeEventListener('afterprint', afterPrint);
    }, 1);
};

window.addEventListener('afterprint', afterPrint);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing HTML templates efficiently without the need for a view engine

For a new application, we are implementing multiple servers for handling different functions - one server for delivering HTML files, another as a proxy to handle HTTPS requests, and a Java backend with a database. The view server should be simple, with an ...

javascriptjqueryhtmltiles

Update the PHP webpage dynamically by utilizing AJAX and displaying the PHP variable

I am working on a PHP page that includes multiple queries, and I would like to be able to include this page in my index.php file and display the results with an automatic refresh similar to the Stack Overflow inbox feature. Is there a way to achieve this ...

javascriptphpajax

Is there a way to use JavaScript/jQuery to randomly resize images every time the page loads

Instead of generating thumbnails for my images, I am interested in displaying the original images on my page. However, I still need to resize these images for optimal viewing. Instead of applying a fixed width of 200px, I would like each image to be displa ...

javascriptjquery

steps to invoke a class within a function

I'm currently attempting to invoke a model class from the Axios response. Instead of displaying an alert, I would like to show a modal popup. Can someone assist me with how to call the modal class from the Axios interceptor function? Thank you in adva ...

javascriptreactjsaxiosinterceptor

Execute a jQuery focus() function on a textarea element within a dynamically added form on the webpage

Whenever I dynamically insert a new form onto the page using clone(), my goal is to have the textarea within the form automatically focused. However, despite trying out the code below, it seems like it's not functioning as expected: .on('click&a ...

javascriptjqueryhtmlfocustextarea

There is an issue with the JSON format being received by fetch in JS when using json_encode in php

Recently, I encountered an issue with my JavaScript function that retrieves data from a PHP page. In the JS code block: fetch("print.php) .then(function (r) { return r.json() }) .then(function (values) { ...... ...... ...

javascriptphpjson

Retrieve the most recent version of the document stored in MongoDB

Is there a way to retrieve the _id (the Mongo ObjectID) of an updated document without having to find it by newData/oldData? I attempted the following: ... collection.update(oldData, newData, function(err, doc) { console.log(docs); // This prints "1" ...

javascriptnode.jsmongodb

Generating a new display div element using an anchor link

I've set up a div container with a button that, upon clicking, adds a class to an element in my markup causing it to expand and take over the entire screen. Markup before: <section class="isi" data-trigger="toggle" data-trigger-class="isi--show-i ...

javascriptjquerycss

Create a new array containing the keys from an array of objects

My task involves extracting the key puppies from an array of objects and returning it in a new array: The input is an array of dogs structured like this: [ {breed: 'Labrador', puppies: ['Fluffy', 'Doggo', 'Floof&ap ...

javascriptarraysjavascript-objects

The JavaScript function is not functioning properly, whereas another function is working as intended

I have created a HTML form with 2 buttons and a table. Each row in the table consists of a checkbox and 2 text fields. The buttons allow users to add and remove rows from the table. The remove button only applies to rows where their checkbox is checked. T ...

javascripthtmlformshtml-tablerows

When utilizing the React onclick function, it generates an increase in state values rather than modifying

I'm currently working on a function that changes the state property, "changedMarkup", when a button is clicked. Initialization constructor() { super(); this.state = { value: 0, changedMarkup: 0 }; } Render Function render() ...

javascriptreactjsonclickmaterial-uistate

Load suggestions from Material UI AutoComplete dynamically based on user input

I am facing a challenge with an Autocomplete component that needs to handle a large data list, up to 6000 elements, and display suggestions based on user input. Due to the sheer number of options, when a user types on a slower computer, there is a noticeab ...

javascriptreactjsinputautocompletematerial-ui

What is the best way to convert dates in Angular's DatePipe using moment.js?

My current package versions are as follows: "@angular/cdk": "^11.2.13", "@ngx-translate/core": "^13.0.0", "@angular/material-moment-adapter": "^12.2.9", "moment": "^2.29.1", &q ...

angularmomentjsangular11date-pipeangular-date-format

Exploring different pages in Angular2 and Ionic2

I am encountering difficulties when it comes to navigating between pages in Angular2 / Ionic2. When attempting to navigate to a new page using the code below: import {Page, NavController} from 'ionic-angular'; import {HomePage} from '../ho ...

angularionic2

I encountered an error while attempting to create an npm package from a forked repository on GitHub

Check out this GitHub repository: https://github.com/jasonhodges/ngx-gist Upon running the package command, I encounter an error: rimraf dist && tsc -p tsconfig-esm.json && rollup -c rollup.config.js dist/ngx-gist.module.js > dist/ngx- ...

node.jsangularnpmnode-modules

Upgrading Angular causes issues with fileReplacements not functioning properly for assets

Since upgrading Angular, I have encountered an issue where fileReplacements no longer work with assets. Here is the code snippet that I am using: "fileReplacements": [ { "replace": "src/assets/scss/x.scss", ...

angularng-buildangular.json

Is it possible to preserve the query parameters from the previous page using Vue Router's Navigation guard feature?

Hey there! So, I'm looking to pass a query from the current page to the next one without manually coding it into all of my push functions. I was wondering if there's a way to do this through Navigation guard or some hooks? I did some research an ...

javascriptnode.jsvue.jsvue-router

Exploring the Concept of Nested ViewModels in Knockout.js Version 3.2.0

I have a global view model that is applied to the main div and I also have other view models that I want to apply to nested elements within my main div However, I am encountering an issue: You cannot bind multiple times to the same element. Below is ...

javascripthtmldata-bindingknockout.jsviewmodel

Is it possible to eliminate the array from a property using TypeScript?

Presenting my current model: export interface SizeAndColors { size: string; color: string; }[]; In addition to the above, I also have another model where I require the SizeAndColors interface but without an array. export interface Cart { options: ...

javascriptreactjstypescriptreact-native

How do you go about installing the most recent version of a module through Private NPM?

When using a private npm registry, I have noticed that some common commands do not seem to be functioning properly: npm install without specifying a specific @version :: issue npm outdated :: issue npm update :: issue npm view <private-packag ...

javascriptnode.jsnpmrepositorysemantic-versioning