Can trusted events in Chrome trigger a timeout with Synchronous Ajax requests?

Question

Can trusted events in Chrome trigger a timeout with Synchronous Ajax requests?

Situation

We are facing a situation where we need to open a new tab in browsers after an XHR / Ajax request is made by clicking on something.

To achieve this, we set the Ajax request to be synchronous in order to maintain the context of the trusted click event and so far it has been working well.

Issue

However, with the latest version of Chrome (36), we are running into popup warnings when there is a delay in the Ajax call. Just a 2-second lag triggers a popup warning instead of opening the tab as expected. The code functions normally when there's no lag, but once there is a delay, the popup warning shows up.

Query

We are wondering if there is a timeout applied to synchronous Ajax requests that must be completed for the trusted event to still work properly?

Is there any workaround for this issue? Keep in mind that the call is already synchronous and halts everything else until the result is received.

Thank you.

Update JSFiddle

Update: I have prepared a JSFiddle to illustrate the problem: http://jsfiddle.net/23JNw/9/

/**
* This method will open the popup without triggering a warning.
*/
function performSlowSyncronousRequest() {
    $.ajax({
     url: '/echo/html',
     data: {delay: 2}, //JSfiddle will delay the response by 2 seconds
     success: function(){
         window.open('http://www.thirtykingdoms.com'); //this causes the popup warning in Chrome
     },
     async: false
    });
}

javascript ajax google-chrome popup synchronous

Answer 1

Answer №1

One way to potentially address this issue is by opening a new tab before the XHR request returns, while still remaining in a trusted context. Web browser tabs and windows created using Javascript can establish connections with the parent window, enabling communication between them.

If you decide to open a new tab when clicking a link, you could display a loading screen in the newly opened window as the XHR call is being processed. Although not as seamless as your initial idea, this approach could serve as a viable solution with some careful planning. Below is a brief code snippet utilizing window.setTimeout() to mimic an asynchronous XHR request:

<html>
<body>
    <h4>
    Hello
    </h4>
    <a id="openWindow" href="">Make http call and open window.</a>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
        (function ($) {
            var newWindow = null,
                timeout = null;

          $(document).ready(function () {
            $('#openWindow').on('click', function (evt) {
                evt.preventDefault();

              newWindow = window.open('about:blank', 'tempWindow');
              $(newWindow.document).find('body').append('<div class="loading">Loading...</div>');

              timeout = window.setTimeout(function () {
                // simulates async XHR
                $(newWindow.document).find('.loading').remove();
                $(newWindow.document).find('body').append('Done loading, here\'s your data');

              }, 5000)

            });
          });

        }(jQuery));
    </script>
</body>

Answer 2

One way to potentially address this issue is by opening a new tab before the XHR request returns, while still remaining in a trusted context. Web browser tabs and windows created using Javascript can establish connections with the parent window, enabling communication between them.

If you decide to open a new tab when clicking a link, you could display a loading screen in the newly opened window as the XHR call is being processed. Although not as seamless as your initial idea, this approach could serve as a viable solution with some careful planning. Below is a brief code snippet utilizing window.setTimeout() to mimic an asynchronous XHR request:

<html>
<body>
    <h4>
    Hello
    </h4>
    <a id="openWindow" href="">Make http call and open window.</a>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
        (function ($) {
            var newWindow = null,
                timeout = null;

          $(document).ready(function () {
            $('#openWindow').on('click', function (evt) {
                evt.preventDefault();

              newWindow = window.open('about:blank', 'tempWindow');
              $(newWindow.document).find('body').append('<div class="loading">Loading...</div>');

              timeout = window.setTimeout(function () {
                // simulates async XHR
                $(newWindow.document).find('.loading').remove();
                $(newWindow.document).find('body').append('Done loading, here\'s your data');

              }, 5000)

            });
          });

        }(jQuery));
    </script>
</body>

Answer 3

Answer №2

Hey @ChristopherLörken! Could you possibly provide an example code snippet or a JSFiddle showing what exactly you're working on? It seems like I might be missing the mark here.

Here's a suggestion that could help:
If you require the event object within your context, consider storing a reference to it for future use, such as within a callback function. Below is an illustration utilizing jQuery:

$(myBtn).click(function(ev){
   var event = ev; // Store a reference to the event object
   $.ajax({
     // ... your options
     success: function(res){
       // Perform operations involving the stored event object
       console.log(event);
     }
   });
});

This approach eliminates the need to make synchronous calls in order to utilize the event within your context, and since it's an asynchronous request, Chrome won't raise any objections to this method. :)

Answer 4

Hey @ChristopherLörken! Could you possibly provide an example code snippet or a JSFiddle showing what exactly you're working on? It seems like I might be missing the mark here.

Here's a suggestion that could help:
If you require the event object within your context, consider storing a reference to it for future use, such as within a callback function. Below is an illustration utilizing jQuery:

$(myBtn).click(function(ev){
   var event = ev; // Store a reference to the event object
   $.ajax({
     // ... your options
     success: function(res){
       // Perform operations involving the stored event object
       console.log(event);
     }
   });
});

This approach eliminates the need to make synchronous calls in order to utilize the event within your context, and since it's an asynchronous request, Chrome won't raise any objections to this method. :)

Answer 5

Answer №3

It seems that the issue lies not with XMLHttpRequest, but rather with the delay (potentially a sync delay or a bug in WebKit/Blink).

You can check out an example here (please note that the sandbox in Snippet does not allow pop-ups):

function performSlowSyncronousRequest() {
    var endsIn, initial;

    delay = 5000;

    endsIn = new Date().getTime() + delay;

    for (; endsIn >= new Date().getTime();) {} // Delay
    window.open('http://www.thirtykingdoms.com');
}

<button onclick="performSlowSyncronousRequest()">Test case</button>

Keep in mind that using sjax (XMLHttpRequest sync) is considered obsolete by some browsers and could negatively impact user experience.

I attempted to simulate a click, however, it did not work as expected:

function clickFire(evt){
var el, evtFake, pos;

el = document.createElement("a");
    el.href = "javascript:void(0);";
    el.innerHTML = "test";
el.onclick = evt;

document.body.appendChild(el);

pos = el.getBoundingClientRect();

evtFake = new MouseEvent("click", {
bubbles: false,
cancelable: false,
view: window,
detail: 0,
screenX: window.screenX,
screenY: window.screenY,
clientX: pos.left + 1,
clientY: pos.top + 1,
ctrlKey: false,
shiftKey: false,
altKey: false,
metaKey: false,
button: 1,
buttons: 0,
relatedTarget: el
});
el.dispatchEvent(evtFake);

window.setTimeout(function() {
document.body.removeChild(el);
}, 1);
}

window.setTimeout(function() {
clickFire(function() {
window.open("http://stackoverflow.com");
});
}, 1000);

Modern web browsers are quite intelligent and difficult to deceive.

Solution

Avoid using pop-ups (who likes pop-ups anyway?), consider simulating a "pop-up" using an <iframe>:

Alternatively, you can add a button using a modal (like bootstrap) and prompt the user to click:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
         Open pop-up :)
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button id="popupIsNotPopular" type="button" class="btn btn-primary">Ok</button>
      </div>
    </div>
  </div>
</div>

window.setTimeout(function() {
    $('#exampleModal').modal();
}, 2000);


$("#popupIsNotPopular").click(function() {
    window.open("http://www.stackoverflow.com");
});

Answer 6

It seems that the issue lies not with XMLHttpRequest, but rather with the delay (potentially a sync delay or a bug in WebKit/Blink).

You can check out an example here (please note that the sandbox in Snippet does not allow pop-ups):

function performSlowSyncronousRequest() {
    var endsIn, initial;

    delay = 5000;

    endsIn = new Date().getTime() + delay;

    for (; endsIn >= new Date().getTime();) {} // Delay
    window.open('http://www.thirtykingdoms.com');
}

<button onclick="performSlowSyncronousRequest()">Test case</button>

Keep in mind that using sjax (XMLHttpRequest sync) is considered obsolete by some browsers and could negatively impact user experience.

I attempted to simulate a click, however, it did not work as expected:

function clickFire(evt){
var el, evtFake, pos;

el = document.createElement("a");
    el.href = "javascript:void(0);";
    el.innerHTML = "test";
el.onclick = evt;

document.body.appendChild(el);

pos = el.getBoundingClientRect();

evtFake = new MouseEvent("click", {
bubbles: false,
cancelable: false,
view: window,
detail: 0,
screenX: window.screenX,
screenY: window.screenY,
clientX: pos.left + 1,
clientY: pos.top + 1,
ctrlKey: false,
shiftKey: false,
altKey: false,
metaKey: false,
button: 1,
buttons: 0,
relatedTarget: el
});
el.dispatchEvent(evtFake);

window.setTimeout(function() {
document.body.removeChild(el);
}, 1);
}

window.setTimeout(function() {
clickFire(function() {
window.open("http://stackoverflow.com");
});
}, 1000);

Modern web browsers are quite intelligent and difficult to deceive.

Solution

Avoid using pop-ups (who likes pop-ups anyway?), consider simulating a "pop-up" using an <iframe>:

Alternatively, you can add a button using a modal (like bootstrap) and prompt the user to click:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
         Open pop-up :)
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button id="popupIsNotPopular" type="button" class="btn btn-primary">Ok</button>
      </div>
    </div>
  </div>
</div>

window.setTimeout(function() {
    $('#exampleModal').modal();
}, 2000);


$("#popupIsNotPopular").click(function() {
    window.open("http://www.stackoverflow.com");
});

Can trusted events in Chrome trigger a timeout with Synchronous Ajax requests?

Situation

Issue

Query

Update JSFiddle

Answer №1

Answer №2

Answer №3

Solution

Similar questions

When executing the app.delete function, the req.body is found to be empty

Why does clicking to add to an existing array only result in the array being cleared instead?

Master the Art of Transforming an Array into a Variable

React-Native: Issue with state not being updated despite using useEffect and fetch

Recurring loop in React while making a GET request

Unlocking the data within an object across all Components in Vue

How to convert two arrays into JSON strings and store them in variables using JavaScript

What is the best way to incorporate a for loop in order to create animations with anime.js?

What is the best way to animate or manipulate individual points on a 3D plane using three.js?

Retrieve the information in a div element from an external website by utilizing AJAX

Using this functionality on a ReactJS Functional Component

Calculate a new value based on input from a dynamic textbox within a datatable when a key is pressed

Is there a way to prevent a 'keyup' event from being triggered by a 'keydown' event?

React is currently throwing an error because it is unable to recognize the properties "position"

Tips for retrieving information from an API and displaying it in a table

Steps to eliminate a choice from the MUI Datagrid Column Show/Hide feature

The JQuery library seems to be unresponsive on my webpage, despite being correctly included

Creating a Nuxt project and integrating the Axios module

Error when parsing JSON due to the presence of backslashes within the serialized object

Assistance needed in loading the gallery "galleria" using the .load function