When the user clicked on the link, it triggered a popup but was promptly blocked

I recently discovered a great trick using JavaScript to open links without being blocked by popup blockers. You can check out the details here.

With this knowledge in mind, I decided to implement a directive in AngularJS:

.directive('kdExport', function () {

    return {
        restrict: 'A',
        scope: {
            options: '=kdExport'
        },
        controller: 'ExportImageController',
        link: function (scope, element, attrs, controller) {

            // Handle button click event
            element.bind('click', function (e) {

                // Prevent default action
                e.preventDefault();

                // Copy options
                angular.extend(controller.options, scope.options);

                // Generate the image
                controller.generateImage(function (preview) {

                    // Create URL
                    var url = '/kits/preview/' + preview.id;

                    // Open new window
                    window.open(url, '_blank');
                });
            });
        }
    };
})

The issue I encountered was that IE was blocking the link. How can I bypass IE's popup blocker when using this functionality?

Answer №1

Displaying a popup right after a user clicks should happen immediately following the click event.

In this scenario, the window.open action is executed within a callback function in controller.generateImage.

To ensure functionality, move your code after angular.extend, and everything will work smoothly.

[...]
link: function (scope, element, attrs, controller) {

        // Bind to the onclick event of our button
        element.bind('click', function (e) {

            // Prevent the default action
            e.preventDefault();

            // Copy our options
            angular.extend(controller.options, scope.options);

            // Open a new window here, not in a callback function
            window.open(url, '_blank');
        });
    }
[...]

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

Showing the version number of a POM in AngularJS

What is the best method for displaying the version number from a POM file in an Angular App efficiently? I am currently running a REST application on Tomcat. I believe there are several possible solutions: Implement a REST service that sends the applic ...

Importing d3.JS JSON data without polluting the global scope

Here is a JSON object: { "temp_data": [10,15,20] } I'm trying to import it: var temp_data; //Importing from JSON if(true){ d3.json("graph.json", function(error, graph) { if (error){ throw error; } temp_da ...

Creating a versatile function for rendering content

I am working on a unique calendar feature that involves using checkboxes for filtering purposes. So far, I have managed to get all the filters functioning correctly by triggering my render event in this manner: //Initiate render event when checkbox is cli ...

Error Message: "Attempting to access the 'on' property of an undefined object leading to an error."

While working on my web app and building the server part, I encountered a CMD error that says: TypeError: Cannot read property 'on' of undefined I have already attempted to establish the connection between server.js and client.js, but it s ...

How can I delete an item from an array when I click on a selected element using Material React Select Multiple?

I found this helpful CodeSandBox demonstration that walks through how to implement a multiple material select feature. Here is an array containing all the available options: const permissionsGroupList = [ { name: 'Sellers' }, { name: &a ...

Tips for replacing a single ui-view when dealing with multiple ui-views within a single HTML document

Currently, I am utilizing ui-router for the routing in my Angular App. The structure of my page consists of three ui-views within a single HTML document as shown below: <html> <div ui-view="header"></div> <div ui-view="content">& ...

Error encountered in Internet Explorer 11 with AJAX request - "SCRIPT65535: Parameter required"

The given code functions correctly in all web browsers except for Internet Explorer, where it triggers an error message saying "SCRIPT65535: Argument not optional". function _getChart(){ $('.series-data').remove(); var itm = window.ite ...

Encountering issues with integrating an external plugin with AngularJS code

For my app, I am attempting to incorporate intercom for monitoring user activity. It functions correctly when placed inside a script tag in index.html. However, I encounter an error when trying to use it in a .ts file as shown below: app/components/rocket/ ...

React Material-UI TextField with Throttling

After exploring React Material UI, I am interested in implementing a TextField component that offers both debouncing and controlled functionality. When we refer to "controlled," we mean that the value persistence is managed externally, with the component a ...

Having trouble displaying filtered and mapped results in React Hooks when working with arrays

import React, { useState, useEffect } from "react"; import axios from "axios"; const App = () => { let [countriesData, updateCountriesData] = useState([]); const [searchInput, setSearchInput] = useState(""); const fe ...

Zooming on a webpage is causing problems

One issue I'm facing is with the elements on my page acting strange when I zoom in and out. Everything seems to be working fine except for a container div that should overlay a color over the image background. When I zoom in or switch to mobile view, ...

Upon its second use, Ajax is loaded with cached data

Imagine a table with multiple rows, each row containing a SHOW button that reveals hidden content when clicked. The hidden div (with the classname "Content") loads the content of a second page using ajax and the id of the corresponding table row. However, ...

"Implementing a 2D graphical user interface on a three.js

Struggling to create a 2D graphical user interface on the renderer. The challenge lies in positioning the 2D GUI dynamically based on the width of an element drawn in threejs (the element has a width of X using threejs units, and the menu needs to be posit ...

Is there a way to remove a row through fetch using onclick in reactjs?

I'm completely new to this and struggling with deleting a row using fetch. I've written some messy code and have no idea if it will even work. Please help, I feel so lost... renderItem(data, index) { return <tr key={index} > &l ...

Connect a function to a functional component within React

When it comes to a class component, you have the ability to define custom functions within the component like so: class Block extends React.Component { public static customFunction1(){ return whatever; } public static customFunction2(){ re ...

Accessing a TypeScript variable in Angular2 and binding it to the HTML DOM

While I have experience with AngularJS, delving into Angular2 has proven to be a new challenge for me. Understanding the ropes is still a work in progress. In my list of files, there's a home.ts and a home.html Within my home.ts, this snippet reside ...

JavaScript Tip: Effortless method to confirm the presence of duplicate values within an array

Similar Question: Best method for identifying duplicate values in a JavaScript array If I have an extensive array containing thousands of elements, I am looking to check if there are 2 or more elements with identical values and return true. I unders ...

Issue: After upgrading jQuery, the .on() method and document.ready event are not functioning properly when used in conjunction

After browsing through other solutions on StackOverflow, I am left wondering why this code suddenly stopped working. Here's some context... we are still sticking with jQuery 1.7.1 and trying to fix plugins and pages that are not compatible with the ne ...

Retrieving reduced or corresponding items from a JSON document

My JSON data is structured as follows: [ { "id" : "1", "type" : "hardware" }, { "id" : "2", "type" : "software" } ] When I execute the following code: $http({ method: 'get', url ...

When working with React, encountering a "TypeError: is not a function" message from a function prop can

I am a beginner with React and I'm attempting to pass a function as a prop to a child component. In this scenario, the parent component looks like this: const [gameStarted, setGameStarted] = useState(false); const [gameSettings, setGameSettings] = use ...